Pregunta CSS - Especificidad e interitance

Question

¿Por qué en el following codeworld es azul en lugar de rojo?

La especificidad de .my_class es 0,0,1,0, pero hereda el color de #my_id que la especificidad es superior (0,1,0,0).

HTML:

<p id='my_id'> 
    Hello 
    <span class='my_class'> 
     world 
    </span> 
</p> 

CSS:

#my_id { 
    color: red; 
} 

.my_class { 
    color: blue; 
} 

Answer 1

Ver: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

hereditario valor se aplicará un elemento sólo si no hay otra declaración de estilo se ha aplicado directamente al elemento.

Este estilo se aplica a un elemento con id="my_id":

#my_id { 
    color: red; 
} 

... y se aplicará (heredar) a un elemento anidado dentro de tener class="my_class" sólo si su propiedad color es de otra manera no especificada.

... que ya no es el caso, una vez que declaran:

.my_class { 
    color: blue; 
} 

Answer 2

Se va en función de la especificidad y la ubicación. La clase se aplica directamente al texto, pero la ID está más lejos.

Para una larga explicación: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Answer 3

Una forma más sencilla de pensar en ella, para especificidad se aplica al mismo nivel, si un estilo es de un padre más local entonces se aplica, independientemente de si un ancestro tiene un estilo con mayor especificidad (ya que está más alejado o menos local).

Answer 4

Buena pregunta. La razón por la que esto sucede, iiuc se debe a la herencia, no a la especificidad.

Mírelo de esta manera, si el tramo no tuviera esa clase, heredaría el color rojo del elemento <p> y "mundo" sería rojo. Pero tenga en cuenta que eso se debe a la herencia.

Cuando establece el color para el tramo, a través de la clase, que anula el valor heredado.

La especificidad es para determinar qué regla usar en las múltiples reglas de la competencia. En su ejemplo, no hay reglas que compitan entre <span>, por lo que la especificidad no entra en juego. Sin embargo, si se ha añadido esto a sus estilos:

#my_id span {color: orange} 

se vería que "mundo" es de color naranja debido a la especificidad del ello siendo más de la clase.