css - div的多个ID在css中不起作用

Question

我有以下CSS：

 #form1,#form2,#form3,#form5,#form6,#form7,#form8 div{
    padding:10px;
    border:1px solid blue;
    background-color: grey;
    font-family:"lucida grande",tahoma,sans-serif;
  }

由于某种原因，最后一个 id 没有得到样式。（即#form8 没有得到样式）。

如果我像这样切换css（不更改任何html代码）：

#form1,#form2,#form3,#form5,#form8,#form6,#form7 div{

现在#form7 没有样式。

请问我的结构编码错误吗？它很奇怪

Answer 1

这可能是 HTML 标记问题。你能提供吗？

一个疯狂的猜测是你的代码看起来像：

<div id="form8">
...
</div>

CSS 选择器的最后一部分（#form8 div）实际上是针对如下标记：

<div id="form8">
  <div>
  ...
  </div>
</div>

这是一个元建议：如果您的选择器列表很长并且显然针对相同类型的元素（表单），请使用类！

.form{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}

Answer 2

似乎您的目标是 div#form1, div#form2 ...等等...您可以跳过为选择器编写 div 。尝试这个

#form1, #form2, #form3, #form5, #form6, #form7, #form8 {
    padding:10px;
    border:1px solid blue;
    background-color: grey;
    font-family:"lucida grande",tahoma,sans-serif;
}

甚至更好......给他们所有人一个类名，比如<form class="myform" id="whatever"></form>并使用：

.myform {
    padding:10px;
    border:1px solid blue;
    background-color: grey;
    font-family:"lucida grande",tahoma,sans-serif;
}

Answer 3

你应该只使用 #form1,#form2,#form3,#form5,#form6,#form7,#form8

#foem8 divdiv用 this指代元素的所有子元素#foem8