:last-child 选择器无效
p标签的最后一个元素添加红色背景,以下代码是正常的:
<style>
p:last-child
{
background: red;
}
</style>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
如果 p 标签后,还是其他兄弟标签,p:last-child
选择器将失效:
...
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<div>div node</div>
</body>
原因在于 el:last-child
选择器的查找步骤:
1)查询 el
选择器匹配元素的所有同级元素
2)在同级元素中,查找最后一个元素
3)检查最后一个元素,是否与选择器 el
相匹配
选择器 p:last-child
第二步的查询结果为<div>div node</div>
,而<div>
与选择器p
不匹配,所以不会生效。