css - 为什么 CSS :not 伪类不能按预期工作？

Question

考虑以下 HTML：

<div class="a">
    <div class="b">Hello</div>
  </div>
  <div class="c">
    <div class="b">World</div>
</div>

正如预期的那样，仅将以下 CSS 颜色添加为红色的“世界”：

.c .b {
  color: red;
}

但是，添加以下 CSS 会将“Hello”和“World”都涂成红色：

:not(.a) .b {
  color: red;
}

为什么？

Answer 1

你需要这样给它： -

演示

div:not(.a) .b {
  color: red;
}

伪类：不是

语法是 selector:not(){ properties }

Answer 2

由于:not伪类表示的元素没有由其参数表示，因此您必须在选择器之前指定要排除的元素:not

根据您的示例，请尝试以下操作：

div:not(.a) .b {
  color: red;
}