是否有第一个直接孩子的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”。 我如何改变选择器以获得我想要的？
你从字面上发布的意思是“找到任何divs内的部分divs，并且是他们父母的第一个孩子。” 该子包含一个与该描述相匹配的标签。
目前还不清楚你是否想要主要分区的两个孩子。 如果是这样，使用这个：
div.section > div
如果您只想要标题，请使用以下命令：
div.section > div:first-child
使用>将描述更改为：“查找任何divs，这是直接派别divs的后代”，这是你想要的。
请注意，除IE6以外，所有主流浏览器均支持此方法。 如果IE6的支持是关键任务的，那么您将不得不将类添加到子div并使用它。 否则，这不值得关心。
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将仍然是黑色的。
在Google上搜索到这个问题。 这将返回具有类container的元素的第一个子元素，而不管该子元素是什么类型。
.container > *:first-child
{
}
上一篇: Is there a CSS selector for the first direct child only?