为什么带有:last-child的CSS选择器表达式无法正常匹配元素？

失效原因 #

你对:last-child伪类的匹配规则存在误解，它的实际生效逻辑是：

1. 先定位父元素的最后一个直接子元素
2. 再判断这个子元素是否符合伪类前面的选择器条件

它不是「筛选出父元素下所有符合前面选择器的元素，再取其中最后一个」。结合你提供的HTML结构，div.container的三个直接子元素按顺序为：<br>、<br>、<p id="copyright">...</p>，它的最后一个子元素是<p>标签，不可能符合前面的br选择器要求，因此你的表达式没有匹配结果。

解决方案 #

如果你需要匹配div.container下最后一个<br>元素，可以使用:last-of-type伪类，它的作用才是筛选指定类型元素中的最后一个，写法如下：

div.container > br:last-of-type

小提示：div[class='container']可以直接简写为div.container，属于类选择器的标准写法，匹配效果完全一致。

内容的提问来源于stack exchange，提问作者Eitanos30