是否有仅第一个直接子代的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”类。如何更改选择器以获得我想要的?

樱小胖Mandy2020/03/23 14:53:21

使用div.section > div

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

古一2020/03/23 14:53:21

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

.section > :first-child

直接选择器是>,第一个子选择器是:first-child

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

div.section > :first-child
小小2020/03/23 14:53:21

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

Gil伽罗小宇宙2020/03/23 14:53:21

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

.container > *:first-child
{
}