múltiples declaraciones de clases importantes y precedencia

Question

Teóricamente hablando, si usted ha tenido este escenario:

<style type="text/css"> 
    .class1 { 
     color:#F00 !important; 
    } 
    .class2 { 
     color:#00F !important; 
    } 
</style> 

<p class="class2 class1">Test</p> 

Qué color debe prevalecer? ¿Cómo determinan los navegadores la precedencia en este escenario?

Answer 1

De acuerdo con esta fuente: http://www.boogiejack.com/CSS_4.html

clase2 debe reemplazar el estilo de clase 1.

Orden del pliego de condiciones: Como último recurso, cuando todos los demás conflictos especificaciones de resolución no pueden determinar qué estilo debe tomar precedencia , el último estilo especificado será el estilo utilizado.

Answer 2

Dado que todas las clases son "igual de importantes" cuando se agregan a un elemento, no importa en qué orden las asigne a su párrafo.

En este caso, color en .class1 y .class2 están ambos declarados tan importante, sino porque .class2 fue declarado después de .class1 el navegador mostrará su párrafo en azul, ya que sobrescribe el color declarada de .class1

también , échele 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.

Answer 3

Con dos selectores ponderados equitativamente, el comportamiento es el mismo si aplica !important a ambos u omítalo 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 clase.

<p class="class2 class1">Test X</p> 
<p class="class1 class2">Test Y</p> 

salida

• prueba X → azul
• Prueba Y → azul

Si utiliza !important en una sola clase de selección, luego de que uno tendrá prioridad (porque adquiere un mayor nivel de especificidad).