如何仅当classB存在时使用CSS/SCSS选择器作用于classE？

先说明你原选择器无效的原因：

• 你写的.classA .classB + .classC逻辑错误，+是相邻兄弟选择器，只能选择和.classB同层级的紧挨着的兄弟元素，但.classB的父元素是.classA，.classC是.classA的同级元素，根本不是.classB的兄弟，所以这个选择器匹配不到任何内容。
• 就算要选.classA的兄弟.classC，中间还隔了两个空div，+也只能选中紧挨着的下一个兄弟，得用通用兄弟选择器~才行。

正确的纯CSS选择器可以用:has()伪类，它能检测父元素是否包含指定子元素，写法如下：

.classA:has(.classB) ~ .classC .classD .classE {
  /* 在这里编写你需要的样式 */
}

选择器拆解： #

1. .classA:has(.classB)：精准选中包含.classB子元素的.classA容器
2. ~ .classC：选中该.classA后面所有同级的.classC元素（不管中间隔了多少其他元素都能匹配）
3. .classD .classE：继续定位到.classC内部的目标元素.classE

兼容性说明： #

:has()目前已被Chrome、Edge、Safari 15.4+支持，Firefox需要在设置里开启layout.css.has-selector.enabled选项才能使用；如果需要兼容更老的浏览器，只能借助JavaScript动态给.classC添加类名，再通过类名控制.classE的样式，但纯CSS方案里:has()是最优解。

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