html - CSS :not selector has no effect

Question

我想给标签类 no-color。只有当 Javascript 被激活时，类 no-color 才会被移除并且文本应该被着色。我当前的 CSS 不工作。这里有一个示例代码。我不需要将类添加到 p-tag 的解决方案，因为这只是示例代码。

JS Fiddle

SASS

:not(.no-color) {
  p {
    color: red;
  }
}

HTML

<div class="no-color">
  <p>hello world</p>
</div>

Answer 1

只需将div 添加到您的选择器DEMO

div:not(.no-color) {
  p {
    color: red;
 }
}

或者在纯 CSS 中是 div:not(.no-color) p

div:not(.no-color) p {
  color: red;
}

<div class="no-color">
  <p>hello world</p>
</div>
<div>
  <p>hello world</p>
</div>