如何在CSS中选中父类下存在指定同级类的特定子元素类

方案1：使用CSS :has() 伪类（推荐） #

这是最贴合需求的原生实现，无需依赖DOM节点顺序：

/* 匹配包含.compare-at-price子元素的.money-styling父元素下的.money类 */
.money-styling:has(.compare-at-price) .money {
    color: #ff0000;
}

:has()是CSS原生的父选择器，会匹配内部存在符合指定选择器节点的元素，上述代码会先筛选出所有包含.compare-at-price子节点的.money-styling容器，再选中容器下的.money类，完全符合需求。
目前主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均已支持该特性，覆盖全球95%以上用户。

方案2：使用兄弟选择器（兼容旧浏览器） #

如果你的DOM结构中.compare-at-price和.money为同级节点，且.compare-at-price的位置固定在.money之前，可以用兼容性更好的通用兄弟选择器实现：

/* 匹配同级前面存在.compare-at-price的.money类 */
.compare-at-price ~ .money {
    color: #ff0000;
}

该方案兼容所有现代浏览器及老旧版本浏览器，缺点是依赖两个同级节点的先后顺序。

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