Почему <p> элемент зеленый?

Я рассматривал этот пример CSS с страницы Mozilla для селектора :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>

Ответ 1

Второй p не :not(.classy) поэтому он не color: red. Это означает, что он по-прежнему имеет свой цвет по умолчанию, который является color: inherit.

Элемент body :not(p) поэтому он color: green.

Второй p поэтому наследует зеленый цвет от элемента body.

Инструменты разработчика в вашем браузере сказали бы вам следующее:

Ответ 2

В дополнение к ответу @Quentin, для вашего понимания попробуйте добавить свои элементы под одним родителем и применить CSS с родительской селекторной ссылкой. Теперь вы получите именно то, что ожидали. Посмотрите ниже фрагмент.

.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>