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 div指的是元素的所有子div，#foem8

div不能在css中工作的多个ID

3 个答案: