css - font - text color html
Múltiples declaraciones de clase importantes y precedencia (3)
Como las clases son todas "igual de importantes" cuando se agregan a un elemento, no importa en qué orden las asigne a su párrafo.
En este caso, el color en .class1 y .class2 se declaran como importantes, pero como se declaró .class2 después de .class1, el navegador mostrará su párrafo en azul, ya que sobrescribe el color declarado de .class1
Además, eche un vistazo a esto: http://jsfiddle.net/3uPXx/1/ Puede ver que no importa en qué orden declare la clase en su párrafo. Como ambas clases definen el mismo atributo ( color ), se sobrescribirá la clase que se declare la última.
Lo único que puede sobreescribir esto es un estilo en línea con! Importante como se puede ver en el violín.
Teóricamente hablando, si tuvieras este escenario:
<style type="text/css">
.class1 {
color:#F00 !important;
}
.class2 {
color:#00F !important;
}
</style>
<p class="class2 class1">Test</p>
¿Qué color debe tener prioridad? ¿Cómo determinan los navegadores la precedencia en este escenario?
Con dos selectores ponderados equitativamente, el comportamiento es el mismo ya sea que se aplique !important para ambos u omítenlo de ambos!
<style type="text/css">
.class1 {
color: #F00; /* red */
}
.class2 {
color: #00F; /* blue */
}
</style>
El orden de las clases en el atributo de clase html es independiente del nivel de especificidad de cada selector de clases.
<p class="class2 class1">Test X</p>
<p class="class1 class2">Test Y</p>
Salida
- Prueba X → azul
- Prueba Y → azul
Si usa !important en una sola clase de selector, entonces esa tendrá prioridad (porque toma un mayor nivel de especificidad).
De acuerdo con esta fuente: http://www.boogiejack.com/CSS_4.html
class2 debe anular el estilo class1.
Orden de especificación: como último recurso, cuando todas las demás especificaciones de resolución de conflictos no pueden determinar qué estilo debe tener prioridad, el último estilo especificado será el estilo utilizado.