为什么 <p> 元素是绿色的？ [复制]答案

【问题标题】：Why is the <p> element green? [duplicate]为什么 <p> 元素是绿色的？ [复制]
【发布时间】：2018-04-13 14:29:00
【问题描述】：

我在 Mozilla 页面中查看 this CSS 示例以获取 :not() 选择器。

例子是：

p:not(.classy) { color: red; }
:not(p) { color: green; }

<p>Irgendein Text.</p>
<p class="classy">Irgendein anderer Text.</p>
<span>Noch mehr Text<span>

我完全理解：

但是为什么第二个p 元素是绿色的呢？它不会被第一个选择器选中，因为它是一个没有 classy 类的 p 元素。但它不会被第二个选中，因为它是一个p 元素。那为什么是绿色的呢？

【问题讨论】：

【解决方案1】：

第二个p 不是:not(.classy)，所以它不是 color: red。这意味着它仍然有它的默认颜色，即color: inherit。

body 元素是 :not(p)，所以它是 color: green。

第二个p 因此从body 元素继承了绿色。

您浏览器中的开发者工具会告诉您：

【讨论】：

我应该补充一点，任何即将声称 :not() “需要”类型或类选择器才能工作的人都是错误的，因为如图所示 :not() 确实工作不合格 - 结果就变成了由于其他因素在起作用，例如在这种情况下的继承，因此违反直觉。并非所有事情都归结为选择器匹配相关元素，因为选择器很可能匹配其他元素并应用影响相关元素布局的样式。
我正在使用 :not([required]) 作为 :optional 的快速填充，但很快发现这不是我的想法。
我不认为提出问题的人处于他们了解“开发人员工具”的阶段 - 也许您还可以提供如何访问它们的摘要。

【解决方案2】：

除了@Quentin 的回答，为了您的理解，尝试将您的元素添加到一个父级下，并将 CSS 与父级选择器引用一起应用。现在你会得到你所期望的。看下面的sn-p。

.test p:not(.classy) { color: red; }
.test :not(p) { color: green; }

<div class="test">
  <p>Irgendein Text.</p>
  <p class="classy">Irgendein anderer Text.</p>
  <span>Noch mehr Text</span>
</div>

因此，在您的情况下，父元素是 body 并像上面的答案一样从那里继承了颜色。

【讨论】：