如何用CSS选择器选中父容器内最后一个class为b的动态子元素

1. 类选择器语法错误：你写的b:last-child是匹配<b>标签元素，要匹配类名为b的元素，需要添加类选择器前缀.，即.b:last-child。
2. 伪类匹配逻辑理解错误：:last-child、:nth-last-child()的规则是先定位父元素的对应位置子元素，再校验是否符合前置选择器条件，而非先筛选符合前置选择器的元素再取最后一个。你提供的DOM结构里，.parent的最后一个子元素是类为c的div，自然无法匹配.b:last-child。

方案1：现代浏览器原生语法（Chrome 111+、Firefox 113+、Safari 9+均支持） #

使用CSS选择器Level4新增的of限定匹配范围，直接筛选所有.b类子元素中的最后一个：

.parent > :nth-last-child(1 of .b) {
  color: #f00;
}

该方案不需要依赖DOM元素的顺序规则，即使.b元素不连续也能正常匹配。

方案2：兼容低版本浏览器实现 #

如果需要兼容不支持上述新语法的环境，可以用:has伪类实现，匹配后面没有其他.b兄弟元素的.b元素：

.parent > .b:not(:has(+ .b)) {
  color: #f00;
}

如果你的DOM结构固定为所有.b元素连续排列，后面紧跟.c元素，也可以用以下写法：

.parent > .b:has(+ .c) {
  color: #f00;
}

如果需要兼容完全不支持:has的极老版本浏览器，只能通过JS遍历.parent下的.b类子元素，给最后一个添加自定义类来设置样式。

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