为什么<p>元素是绿色的？

Question

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

示例是：

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元素是红色的，这是因为它是一个p元素，并且它没有“classy”类。
• 我也明白为什么span元素是绿色的，因为它是由:not(p)选中的，它不是p元素

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

Answer 1

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

body元素为:not(p)，因此为color: green。

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

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

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以在你的情况下，父元素是body并从那里继承颜色，就像上面的答案一样。