如何用CSS实现单子元素变红、多子元素仅最后一个变红及伪元素设置？

你需要的效果完全可以通过CSS原生伪类实现，无需额外JS逻辑，实现代码如下：

/* 同时匹配仅有的1个子元素、多个子元素中的最后一个 */
.container .child:only-child,
.container .child:last-child {
  color: red;
}

• :only-child 伪类只会匹配父容器下唯一的子元素，刚好对应API返回单条记录的场景
• :last-child 伪类会匹配父容器下的最后一个子元素，对应返回多条记录时最后一条变红的需求
• 两个伪类用逗号分隔合并为同一条样式规则，即可同时覆盖两种场景，匹配逻辑和你的需求完全对齐

你之前写的代码不生效的核心原因是选择器顺序错误：
原写法 .container .child:before :last-child 的匹配逻辑是「在.child的:before伪元素内部查找最后一个子元素」，而伪元素不属于实际DOM节点，内部不可能存在子元素，因此匹配不到任何元素。

正确的选择器书写顺序是先匹配目标元素，再追加伪类/伪元素声明，你找到的解决方案是可行的，如果要更精准避免匹配到容器内其他非.child的元素，可以调整为：

.container .child:last-child::before {
  content: "-";
}

注：CSS3标准中伪元素推荐使用双冒号::写法，单冒号:before是为了兼容旧版浏览器的兼容写法，两种写法都可正常生效。

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