¿Cómo resuelven los navegadores las clases conflictivas?

Question

sé que es posible especificar varias clases en un elemento en HTML:

<div class='one two'>Text</div> 

Parece que las clases son accesibles desde JavaScript como una sola cadena.

¿Qué sucede cuando las clases se especifican con propiedades contradictorias? Por ejemplo

div.one { 
    background-color: red; 
    color: blue; 
} 
div.two { 
    background-color: green; 
} 

¿El resultado dependerá del orden en que se especifiquen las clases? Por ejemplo, ¿podría razonablemente esperar que aparezca el div anterior con texto azul y fondo verde, porque la clase two se evalúa en segundo lugar, sobrescribiendo la propiedad background-color?

Answer 1

Leer acerca de la especificidad:

• Simple explanation
• More in depth explanation

Respuesta corta: si dos selectores tienen la misma especificidad, gana el último que se declarará.

Answer 2

http://jsfiddle.net/mrtsherman/2NpXS/

Depende de la orden de hoja de estilos. Las declaraciones de estilo posteriores tienen prioridad. Puedes invertir las dos líneas de css para ver.

Answer 3

Si los selectores tienen el same level of precedence (como aquí), el que se especifica más adelante tiene prioridad. En este caso, el fondo debe ser verde, pero el color de la fuente es azul.

Desde el CSS spec:

Por último, ordenar por orden especificado: si dos declaraciones tienen el mismo peso, origen y especificidad, las últimas victorias especificados. Las declaraciones en hojas de estilo importadas se consideran anteriores a cualquier declaración en la propia hoja de estilo.

Answer 4

Lo que está utilizando para darles estilo se llaman "hojas de estilo en cascada". La parte en cascada significa que es como una cascada y las reglas futuras se basan (o sobrescriben) en las anteriores. Por lo tanto, la segunda regla sobrescribirá la propiedad de color de fondo pero conservará el color de la fuente.

(cuidado con preferencia sin embargo. Una regla que se apaga de una identificación tiene prioridad sobre uno que va fuera de una clase, independientemente de dónde se colocan.)

Answer 5

CSS tiene un orden muy bien definido de precedencia.

En casos como este, donde todo lo demás es igual y la precedencia es igual, el navegador debe elegir el estilo definido al final en las hojas de estilo.

En el ejemplo que ha dado, esto significa que los estilos div.two anularán div.one, donde la misma propiedad se define en ambos.

Por cierto, esta es también la misma característica que le permite definir estilos múltiples con la misma propiedad en el mismo selector, para admitir diferentes características del navegador. Por ejemplo, algunos navegadores no admitan colores RGBA, por lo que pueden hacer lo siguiente:

.myclass { 
    background: rgb(200, 54, 54); 
    background: rgba(200, 54, 54, 0.5); 
} 

Todos los navegadores tomarán la última background declaración de que ellos apoyan, por lo que los navegadores que soportan rgba recogerá el segundo, mientras que los navegadores que no, se arreglará con el primero.

También es la razón por la que, cuando usa estilos prefijados de proveedor, también debe especificar la versión no prefijada después de la (s) versión (s) prefijada (s), de modo que cuando el navegador del vendedor empiece a admitir la versión no prefijada de el estilo, puede estar seguro de que lo usará en lugar de la versión prefijada (que puede no ser compatible con todas las características de la versión final).

Answer 6

El resultado depende de la orden de las clases se especifican en

He aquí un buen reportaje en el orden en que se ejecutan las reglas CSS:. http://htmlhelp.com/reference/css/structure.html