如何仅使用CSS为子/孙元素含特定类名的li元素应用样式

传统CSS（不支持CSS选择器Level 4的老旧环境）无法实现反向选中祖先的逻辑——原生CSS的匹配逻辑是从右向左解析选择器，只能选中父元素下的后代，无法反过来根据后代特征选中父元素。

目前所有现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均已支持:has()结构伪类，这是纯CSS实现该需求的唯一原生方案，写法如下：

/* 匹配所有内部任意层级存在.custom-class-2元素的li */
li:has(.custom-class-2) {
  /* 在此处写入你需要应用的样式，例如 */
  background: #f0f9eb;
  border-left: 3px solid #67c23a;
}

写法说明 #

• 上述写法中，:has()内的选择器默认匹配所有后代元素：不管.custom-class-2是li的直接子元素、孙级元素还是嵌套更深的后代，只要存在就会命中对应的li，完全覆盖你提到的子/孙级后代匹配需求。
• 如果需要限定「只有.custom-class-2是li的直接子元素时才匹配」，可以将选择器改为li:has(> .custom-class-2)，嵌套更深的对应类名元素不会触发匹配。

针对你给出的示例代码，上述规则只会命中第二个li元素，第一个li因为内部仅存在.custom-class-1，不会被选中。

兼容性提示：如果需要兼容IE、105版本以下的Chrome等老旧浏览器，纯CSS没有可实现的替代方案，只能通过JavaScript提前给符合条件的li添加专属类名后再写样式，不符合纯CSS的要求。

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