使用css的多个子代选择器

检查以下代码：

.aaa:不是（.bbb）.ccc{
字体大小：20px；
颜色：#FF0000；
}

阿奎

实际上，有些元素不是

.bbb

——在本例中是

.bbb

之前和之后的两个div。要让它起作用，你需要更具体一些。您可以添加另一个类（示例中为

zzz

），如果该类未与

.bbb

组合，则将应用该规则

.aaa.zzz:不是（.bbb.ccc）{
字体大小：20px；
颜色：#FF0000；
}

阿奎
非（.bbb）
将匹配没有类
.bbb
的任何div，并且在
.aaa
和
.ccc
之间有很多div，这就是文本为红色的原因。要做你想做的事，你需要考虑两个选择器


.aaa.ccc{
字体大小：20px；
颜色：#FF0000；
}
/*如果是.bbb的子项，则重置样式*/
.bbb.ccc{
颜色：首字母；
字号：首字母；
}

阿奎
您忽略了
.ccc
是与
：not（.bbb）
匹配的组件的子组件：

我很喜欢你的想法。但是为什么
.aaa div:not（.bbb）.ccc
不起作用？我试着像你说的那样更具体一些，但看起来这还不够。我无法访问HTML代码，只能访问CSS文件。因为还有其他div没有
.bbb
。我不确定这是否在所有情况下都有效，因为如果使用类
zzz bbb
删除div，您将不会选择
ccc
。。。您的选择器类似于
.aaa.randomClass.ccc
，您在
aaa
和
ccc
之间引入了一个随机选择器来进行选择impossible@OriDrori非常感谢，您的解决方案确实非常好，但它需要更改HTML代码，这在我的情况下是不可能的。但我很喜欢你的解决方案，谢谢！Temani Afif如果你是对的：）我非常喜欢你的解决方案，效果非常好！它就像手套一样适合我的箱子，谢谢我的朋友。谢谢你的关注，你的解决方案也可以工作，但是Temani Afif重置了css样式（我不知道最初的样式），工作得更好。但是非常感谢！
<div class="aaa">
  <div class="ccc"></div>
  <div class="bbb">
    <div> // <-- :not(.bbb)
      <div class="ccc"></div>
    </div>
  </div>
</div>

.aaa .ccc {
  color: blue;
}

.aaa .bbb .ccc {
  color: red;
}