css - propiedades - Precedencia de varias clases que definen la propiedad de color establecida por orden de declaración en lugar de orden de especificación

propiedades de css y ejemplos

Question

Dadas dos clases de igual especificidad que definen la propiedad de color, pensé que la última clase enumerada en el atributo de clase de elemento tendría prioridad.

Desde http://htmlhelp.com/reference/css/structure.html :

Orden de especificación Para facilitar la tarea, cuando dos reglas tienen el mismo peso, la última regla especificada gana.

En el siguiente ejemplo de código de vacío, el orden en que se define el conjunto de reglas de clase determina la prioridad. Aquí, la última, o la más reciente, definición de conjunto de reglas de clase tiene prioridad.

<style>
.makeBlue {color: blue;}
.makeGreen {color:green;}
</style>
<div>
<p class="makeGreen makeBlue">makeGreen makeBlue</p>
<p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

El texto de salida es verde.

Si cambio el orden de la declaración de clase y declaro .makeGreen primero

<style>
.makeGreen {color:green;}
.makeBlue {color: blue;}
</style>
<div>
<p class="makeGreen makeBlue">makeGreen makeBlue</p>
<p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

El texto de salida es azul.

Nunca he notado esto antes. edit pensé que la edición de la última clase enumerada en el atributo de clase de elemento tiene prioridad.

editar Para aclarar -> A veces pienso en un elemento como una mascota, digamos un perro. Veo agregar una clase al atributo de clase del elemento como emitir el comando dog a. Si le digo que se siente, y luego le dice que se acueste, espero que el perro se acueste. No espero que el perro permanezca sentado simplemente porque le enseñé cómo sentarse después (más recientemente que), le enseñé cómo acostarme.

Entonces ... dos preguntas.

1. ¿Es así como se supone que es? contestado
2. Si es así ... ¿por qué? No puedo ver la ventaja de tener que escarbar en las declaraciones de clase para determinar cuál fue declarado antes que el otro.

¡Muchas gracias!

Answer 1

El orden de las clases según las especifique en los elementos es irrelevante. Lo que importa es el orden en el que los define en las declaraciones de estilo. La cita que publicó significa en las declaraciones de estilo, no en el orden en que se enumeran las clases en los elementos.

Answer 2

Esto parece limitar las opciones. Si quiero usar dos clases en dos párrafos diferentes pero la prioridad es diferente, necesitaré definir una tercera clase que sea igual a la primera clase definida pero con un nombre ligeramente diferente.

p.ej

.xxxxx {margin-top: 1em; margin-left: 0; text-align: left; ... [some other attribute definitions]}<br/>
.yyyyy {margin-top: 3em; margin-left: 1em; text-align: justify; ... [some different attribute definitions]}
<p class="yyyyy xxxxx">...</p> 

siempre utilizará un margen superior de 3em con un margen izquierdo de 1em y una alineación de texto de justificar más los otros atributos en xxxxx y yyyyy. Sin embargo, puede haber una situación en la que quiera anular las configuraciones de margen superior, margen izquierdo y texto al mismo tiempo que mantengo todos los demás atributos en xxxxx y yyyyy. Si la prioridad se determinara por orden en el atributo de clase, tendría esa opción al hacer esto:

<p class="xxxxx yyyyy">...</p>

Como no lo es, tengo que crear otra definición debajo de las dos en cuestión, así:

.zzzzz {margin-top: 1em; margin-left 0; text-align: left; ... [some other attribute definitions]}

y use

<p class="yyyyy zzzzz">...</p>

Esto parece una solución no óptima para el problema, mientras que la prioridad de orden de atributo de clase permite más flexibilidad sin destruir el CSS.

Por cierto, el Nook Glowlight lo hace de la manera que debería hacerse permitiéndome establecer la prioridad según el orden en el atributo de clase. Y así mi css es un poco más compacto.

Si hay algo que he aprendido en mis décadas de programación, es que la precedencia se ubica lo más cerca posible de donde se realiza todo el trabajo. Poner prioridad en una hoja de estilo estática vinculada reduce la flexibilidad.