如何用CSS选择器选中无.b父元素的.c并设置红粗样式？

刚好可以用CSS的:not()伪类来实现这个需求，核心就是精准筛选出那些**没有任何.b类祖先元素（直接或间接）**的.c元素，下面是具体的代码实现和示例：

CSS 实现代码 #

.a :not(.b) .c {
  color: red;
  font-weight: bold;
}

对应的HTML结构示例 #

<div class="a">
  <div class="not-b">
    <div class="c">bold red</div>
    <div class="b">
      <div class="c">normal black</div>
    </div>
  </div>
</div>

简单解释一下选择器逻辑 #

这个选择器.a :not(.b) .c的工作原理是：

• 先定位到.a容器下的所有元素
• 筛选出其中不属于.b类的元素（包括直接子元素和更深层的非.b元素）
• 最后选中这些符合条件的元素内部的.c元素

这样一来，只要.c的任何一个祖先元素是.b，它就会被自动排除在外，不会应用红色加粗的样式；只有完全没有.b类父级/祖先的.c才会被选中。

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