是否有仅第一个直接子代的CSS选择器？

Question

我有以下HTML<div class="section">   <div>header</div>   <div>          contents          <div>sub contents 1</div>                        <div>sub contents 2</div>   </div></div>以及以下样式：DIV.section DIV:first-child {  ...}由于某种原因，我不了解该样式已应用于“子内容1” <div>和“标题” <div>。我认为样式上的选择器仅适用于div的第一个直接子类，该子类具有“ section”类。如何更改选择器以获取所需的内容？

Answer 1

您所发布的字面意思是“查找在div分区内并且是其父级的第一个孩子的div。” 该子项包含一个与该描述匹配的标签。

对我来说还不清楚，你是否想要主要div的两个孩子。如果是这样，请使用以下命令：

div.section > div

如果只需要标题，请使用以下命令：

div.section > div:first-child

使用>更改将描述更改为：“查找属于div分区的直接后代的所有div”。

请注意，除IE6之外，所有主流浏览器均支持此方法。如果IE6支持是关键任务，则必须将类添加到子div并使用它。否则，这是不值得关心的。

Answer 2

CSS被称为级联样式表，因为规则是继承的。使用下面的选择，将只选择父母的直接孩子，但它的规则将被继承由div的孩子divs：

div.section > div { color: red }

现在，无论是div 和它的孩子会red。如果您不希望继承父项，则需要取消对父项设置的任何内容：

div.section > div { color: red }

div.section > div div { color: black }

现在，只有div作为其直系子代的那个单身div.section会是红色，但其子代divs仍然会是黑人。