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

我有以下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”类。如何更改选择器以获取所需的内容？

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

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

div.section > div

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

div.section > div:first-child

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

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

在Google上搜索时发现此问题。这将返回具有class的元素的第一个孩子container，而不管该孩子是什么类型。

.container > *:first-child
{
}

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仍然会是黑人。

div.section > div

使用div.section > div。

更好的是，<h1>在标题和div.section h1CSS中使用标记，以支持较旧的浏览器（不了解>）并保留标记语义。

您的直接第一个孩子的CSS选择器是：

.section > :first-child

直接选择器是>，第一个子选择器是：first-child

就像其他人建议的那样，在：之前不需要星号。您可以通过添加以下标签来修改此解决方案，从而加快DOM搜索的速度：

div.section > :first-child