添加其他div后CSS :last-child选择器失效的原因是什么？

:last-child 是CSS伪类选择器，命中元素需要同时满足两个独立条件：

• 元素完全匹配:last-child前面的所有选择器限定条件（你示例中就是带有.flex-50类的元素）
• 该元素是它的直接父元素的所有子元素中的最后一个，注意是父级下的全部子元素排序后的最后一位，不是仅满足前面限定条件的子元素中的最后一位。

你的场景适配说明 #

你给出的示例中，.container父容器下共有3个子元素，按顺序为：第一个.flex-50元素、第二个.flex-50元素、无类名div元素。

• 保留无类名div时，父容器的最后一个子元素是无类名div，不满足.flex-50的类限定，因此没有元素命中.flex-50:last-child，样式不生效。
• 删除无类名div后，父容器的最后一个子元素就是第二个.flex-50元素，同时满足两个条件，因此文字变为红色。

实现预期效果的方案 #

如果你想要匹配父容器内最后一个带有.flex-50类的元素，可使用CSS选择器Level 4提供的:nth-last-child()带范围匹配语法，写法如下：

.container :nth-last-child(1 of .flex-50) {
  color: red;
}

该语法已被Chrome 111+、Firefox 113+、Safari 9+等主流浏览器支持，可覆盖绝大多数使用场景。

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