我有以下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的第一个直接子元素。我如何改变选择器来得到我想要的?
当前回答
div.section > div
其他回答
在谷歌上搜索到这个问题。这将返回具有类容器的元素的第一个子元素，而不管该子元素是什么类型。
.container > *:first-child
{
}
CSS被称为级联样式表，因为规则是继承的。使用下面的选择器，将只选择父div的直接子div，但它的规则将被该div的子div继承:
div.section > div { color: red }
现在，这个div和它的子div都是红色的。如果你不想让它继承，你需要取消你在父节点上设置的任何东西:
div.section > div { color: red }
div.section > div div { color: black }
现在只有div.section的直接子div是红色的，但它的子div仍然是黑色的。
不完全是这个问题，但可能有用:
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>
使用div.section > div。
更好的是，在CSS中为标题和div.section h1使用一个<h1>标记，以便支持旧的浏览器(不知道>)并保持标记语义。
div.section > div
