有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>。

我认为样式上的选择器只会应用于带有“section”类的div的第一个直接子元素。我如何改变选择器来得到我想要的?

502211 次浏览
小开
最佳答案

你发布的字面意思是“找到任何在section divs内的divs，并且是他们父母的第一个孩子。”子包含一个与该描述匹配的标记。

我不清楚你是否想要主div的两个子div。如果是，请使用以下语句:

div.section > div

如果你只想要头部，使用这个:

div.section > div:first-child

使用>将描述更改为:“查找分段divs的直接后代的任何div”，这是你想要的。

请注意，除了IE6，所有主流浏览器都支持此方法。如果IE6支持是关键任务，您将不得不向子div添加类并使用它。否则，它就不值得关心。

小开 
div.section > div
小开

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

div.section > div { color: red }

现在，div 而且的子结点都将是red。如果你不想让它继承，你需要取消你在父节点上设置的任何东西:

div.section > div { color: red }
div.section > div div { color: black }

现在只有div.section的直接子div是红色的，但它的子divs仍然是黑色的。

小开

使用div.section > div。

更好的是，在CSS中使用<h1>标记作为标题和div.section h1标记，以便支持旧的浏览器(不知道>) 而且保持标记语义。

小开

在谷歌上搜索到这个问题。这将返回类为container的元素的第一个子元素，而不管该子元素是什么类型。

.container > *:first-child
{
}
小开

在你的例子中，直接第一个子元素的CSS选择器是:

.section > :first-child

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

不需要像其他人建议的那样在:前面加星号。你可以通过修改这个解决方案来加速DOM搜索:

div.section > :first-child
小开

不完全是这个问题，但可能有用:

div.section > :first-child:is(div)

这将只匹配.section的第一个子元素，并且仅当它是div时。

匹配:

<div class="section">
<div>MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>

不匹配:

<div class="section">
<img ... >
<div>NO MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
小开

这是我如何解决使用TailwindCSS (v3.1)与任意的变体。 我只希望在表的第一列下划线徘徊时，因为它是一个链接 

[&>:first-child]:hover:underline

提交答案