我有以下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
{
...
}
由于某种原因，我不明白该样式被应用于 "sub contents 1" <div> 以及 "header" @987654325 @。
我认为样式上的选择器仅适用于具有名为“section”的类的 div 的第一个直接子级。如何更改选择器以获得我想要的？
【问题讨论】：
标签： html css css-selectors
您发布的字面意思是“查找位于部分 div 内并且是其父级的第一个子级的任何 div。” sub 包含一个与该描述匹配的标签。
我不清楚你是否想要主 div 的两个孩子。如果是这样，请使用：
div.section > div
如果你只想要标题，使用这个：
div.section > div:first-child
使用> 将描述更改为：“查找作为部分 div 的直接后代的任何 div”，这正是您想要的。
请注意所有主流浏览器都支持此方法，IE6 除外。如果 IE6 支持是关键任务，则必须将类添加到子 div 并改为使用它。否则就不值得关心了。
【讨论】：
div.section > div:first-child > div { /* Cancel Changes*/}
在 Google 上搜索找到了这个问题。这将返回类为 container 的元素的第一个子元素，无论子元素是什么类型。
.container > *:first-child
{
}
【讨论】：
.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.section 的直接子代div 是红色的，但它的子代divs 仍然是黑色的。
【讨论】：
在您的情况下，直接第一个孩子的 CSS 选择器是：
.section > :first-child
直接选择器是>，第一个子选择器是:first-child
: 之前不需要星号，正如其他人所建议的那样。您可以通过添加标签来修改此解决方案来加快 DOM 搜索：
div.section > :first-child
【讨论】：
div.section > div
【讨论】：
使用div.section > div。
更好的是，在您的 CSS 中使用 <h1> 标签作为标题并使用 div.section h1，以支持旧版浏览器（不知道 >）并且你的标记语义。
【讨论】：