Pourquoi l'élément <p> est-il vert ?

Question

Je regardais este Exemple CSS de la page Mozilla pour le :not() sélecteur.

L'exemple est le suivant :

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>

Ce que je comprends parfaitement :

• Je comprends pourquoi la première p est rouge, c'est parce qu'il s'agit d'un élément p et qu'il n'a pas la classe "classy".
• Je comprends également pourquoi la span est vert, c'est parce qu'il est sélectionné par l'élément :not(p) il ne s'agit pas d'un p élément

Mais pourquoi la deuxième p élément vert ? Il ne serait pas sélectionné par le premier sélecteur, car il s'agit d'un élément p sans la classe classy . Mais il ne serait pas sélectionné par le second, car il s'agit d'une p élément. Pourquoi est-il vert ?

Answer 1

Le deuxième p n'est pas :not(.classy) Ainsi, il n'est pas color: red . Cela signifie qu'il a toujours son par défaut couleur, qui est color: inherit .

En body est :not(p) Il en est ainsi color: green .

Le deuxième p hérite donc de la couleur verte de la body élément.

Les outils de développement de votre navigateur vous l'auraient indiqué :

Answer 2

En plus de la réponse de @Quentin, pour votre compréhension, essayez d'ajouter vos éléments sous un parent et appliquez le CSS avec la référence du sélecteur de parent. Vous obtiendrez alors exactement ce que vous attendiez. Regardez l'extrait ci-dessous.

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

Dans votre cas, l'élément parent est donc body et hérite de la couleur à partir de là, comme dans la réponse ci-dessus.