使用 :not CSS 选择器

Question

我想把我所有的p都涂成蓝色，除了无颜色的div里面的那个。

我尝试了p:not(.no-color)，:not(.no-color) p，div:not(.no-color) p但我想我误解了一些东西

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

<div class="container">
  <p>Lorem ipsum</p>
  <div class="no-color"><p>Lorem ipsum</p></div>
  <p>Lorem ipsum</p>
  <div class="random-class"><p>Lorem ipsum</p></div>
</div>

编辑：HTML代码是自动检索的，所以我无法选择在哪些元素上应用类。我只能在 CSS 中风格化。

Answer 1

如果你不能修改 HTML 你可以使用这样的东西：

.container > p,
.container > div:not(.no-color) > p {
  color: blue;
}

<div class="container">
  <p>Lorem ipsum</p>
  <div class="no-color">
    <p>Lorem ipsum</p>
  </div>
  <p>Lorem ipsum</p>
  <div class="random-class">
    <p>Lorem ipsum</p>
  </div>
</div>

Answer 2

这个选择器应该可以工作，而不修改 HTML：

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

<div class="container">
  <p>Lorem ipsum</p>
  <div class="no-color"><p>Lorem ipsum</p></div>
  <p>Lorem ipsum</p>
  <div class="random-class"><p>Lorem ipsum</p></div>
</div>

(对不起，我之前无益的答案...我实际上测试了这个！

编辑：固定答案

Answer 3

我会把类放在<p>上，然后p:not(.no-color)就可以了。

但是，如果无法更改 HTML 结构，则可以使用 .no-color p 选择器将作为具有 .no-color 类的元素的后代<p>，然后将颜色设置为 inherit 。

将颜色设置为 inherit 允许您获取封闭父级的颜色，而无需指定它。

此技术适用于.no-color父级下方任意嵌套的<p>元素。

p {
  color: blue;
}
.no-color p {
  color: inherit;
}

<p>Lorem ipsum</p>
<div class="no-color">
  <p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="no-color">
  <div>
    <p>Lorem ipsum</p>
  </div>
</div>