HTML:
<div>
<article>
<h1>我是捣乱的</h1>
<p>我是老大</p>
<p>我是老二</p>
<p>我是老三</p>
</article>
</div>
CSS:
div p:first-child {
color: red;
}
按照选择器语序来看,我们是想选中 div
后代元素中的 p
兄弟元素的第一个,并且把它设置为红色。
但是实际不生效!为什么?
h1
标签在作怪,实际上它成了和 p
兄弟元素同级别的老大,但由于它不是 p
元素,因此也不生效。
因此在使用伪类 :first-child
时要注意::first-child
前面的选择器一定要是同级别当中排在第一个的
也就是像这这样:
<div>
<article>
<!-- 四兄弟中排第一 -->
<p>我是老大</p>
<h1>我是捣乱的</h1>
<p>我是老二</p>
<p>我是老三</p>
</article>
</div>