html - style - ¿Por qué el elemento<p> es verde?

span html significado

Question

Esta pregunta ya tiene una respuesta aquí:

• CSS: no pseudo-class no funciona 4 respuestas

Estaba viendo this ejemplo de CSS de la página de Mozilla para el selector :not() .

El ejemplo es:

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>

Lo que entiendo totalmente:

• Entiendo por qué el primer elemento p es rojo, es porque es un elemento p y no tiene la clase ''con clase''.
• También entiendo por qué el elemento span es verde, es porque está seleccionado por :not(p) , no es un elemento p

Pero, ¿por qué el segundo elemento p verde? No sería seleccionado por el primer selector, porque es un elemento p sin clase classy . Pero no sería seleccionado por el segundo, porque es un elemento p . Entonces, ¿por qué es verde?

Answer 1

Además de la respuesta @Quentin, para su comprensión intente agregar sus elementos en uno de los padres y aplique el CSS con la referencia del selector principal. Ahora obtendrá exactamente lo que esperaba. Mira el fragmento de abajo.

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

Entonces, en su caso, el elemento padre es el body y heredó el color de allí como la respuesta anterior.

Answer 2

La segunda p no es :not(.classy) por lo que no es color: red . Esto significa que todavía tiene su color predeterminado , que es color: inherit .

El elemento del body es :not(p) por lo que es de color: green .

Por lo tanto, la segunda p hereda el color verde del elemento del body .

Las herramientas de desarrollo en tu navegador te habrían dicho esto: