¿El orden de las clases enumeradas en un artículo afecta el CSS?

Sé que el selector de CSS con la especificidad más alta tiene prioridad (es decir .classname < #idname ).

También sé que si las cosas tienen la misma especificidad, entonces la última statement llamada tiene prioridad:

 .classname1 { color: red; } .classname1 { color: blue; } // classname1 color will be blue 

¿El orden de las clases HTML en un elemento DOM afecta la prioridad de la statement?

Tengo que discrepar un poco con las respuestas de Jon y Watson, ya que …

Sí, puede (dependiendo de la statement)

Tu pregunta es:

¿El orden de las clases CSS en un elemento DOM afecta la prioridad de la statement?

Lo cual depende de la statement en cuestión.

El orden HTML no suele importar

Los siguientes son equivalentes cuando se trata de una llamada directa a una clase (es decir, .class1 o .class2 ) o a una llamada combinada (es decir .class1.class2 o .class2.class1 ):

 

Casos en los que se puede afectar la prioridad del extracto del HTML anterior en función del orden HTML

El principal lugar donde se ordena en HTML es con el uso de selectores de atributos en su CSS.

Ejemplo 1 El violín que utiliza el siguiente código que busca hacer coincidir el valor del atributo NO tendrá ningún cambio en el color de la fuente, y cada div tendrá propiedades diferentes debido al orden de las clases:

 [class="class1"] { color: red; } [class="class1 class2"] { background-color: yellow; } [class="class2 class1"] { border: 1px solid blue; } 

Ejemplo 2 El violín utilizando el siguiente código que busca hacer coincidir el comienzo del valor del atributo NO tendrá ningún cambio en el color de la fuente para el segundo div , y cada div tendrá propiedades diferentes debido al orden de las clases:

 [class^="class1"] { color: red; } [class^="class1 class2"] { background-color: yellow; } [class^="class2 class1"] { border: 1px solid blue; } 

Ejemplo 3 El violín utilizando el siguiente código que busca hacer coincidir el final del valor del atributo NO tendrá ningún cambio en el color de la fuente para el primer div , y cada div tendrá propiedades diferentes debido al orden de las clases:

 [class$="class1"] { color: red; } [class$="class1 class2"] { background-color: yellow; } [class$="class2 class1"] { border: 1px solid blue; } 

Una statement aclaratoria sobre “Prioridad”

Para ser claros, en los casos anteriores, lo que se afecta en lo que se refiere a la “prioridad de la statement” es realmente una cuestión de si la statement se aplica o no al elemento. Pero dado que la aplicación o no es en cierto sentido, la prioridad básica, y dado que lo anterior son casos en los que dicha aplicación se basa en el orden de las clases en el elemento HTML Dom (en lugar de la presencia o ausencia de la clase), Pensé que valía la pena agregar esto como una respuesta.

Posible uso válido de pedidos de clase?

Este es un pensamiento que se me ocurre, basado en el comentario de BoltClock. Considere la posibilidad de usar solo dos clases para diseñar elementos basados ​​en los factores que se consideren críticos para un estilo diferente. Estas dos clases teóricamente pueden reemplazar el uso de once clases individuales diferentes usando la combinación de selectores de atributos (en realidad, como se verá más adelante, las posibilidades son casi ilimitadas con una sola clase, pero lo discutiré en un momento dado que este publicación es sobre ordenar de múltiples clases). Para estas dos clases podemos diseñar elementos de manera diferente de la siguiente manera:

Asumiendo estas combinaciones de HTML

 
Element 1
Element 2
Element 3
Element 4

Posibilidades de CSS

 /* simply has the class */ .class1 {} /* affects elements 1, 3, 4 */ .class2 {} /* affects elements 2-4 */ /* has only a single class */ [class="class1"] {} /* affects element 1 only */ [class="class2"] {} /* affects element 2 only */ /* simply has both classes */ .class1.class2 {} /* affects elements 3-4 */ /* has both classes, but in a particular order */ [class="class1 class2"] {} /* affects element 3 only */ [class="class2 class1"] {} /* affects element 4 only */ /* begins with a class */ [class^="class1"] {} /* affects elements 1 & 3 only */ [class^="class2"] {} /* affects elements 2 & 4 only */ /* ends with a class NOTE: that with only two classes, this is the reverse of the above and is somewhat superfluous; however, if a third class is introduced, then the beginning and ending class combinations become more relevant. */ [class$="class1"] {} /* affects elements 2 & 4 only */ [class$="class2"] {} /* affects elements 1 & 3 only */ 

Si calculo correctamente, 3 clases podrían dar al menos 40 combinaciones de opciones de selector.

Para aclarar mi nota acerca de las posibilidades “ilimitadas”, dada la lógica correcta, una sola clase puede haber incrustado en ella combinaciones de códigos que se buscan a través de la syntax [attr*=value] .

¿Es todo esto demasiado complejo de administrar? Posiblemente. Eso puede depender de la lógica de exactamente cómo se implementa. El punto que bash resaltar es que con CSS3 es posible hacer que el orden de las clases sea significativo si uno lo desea y lo planificó, y no sería terriblemente incorrecto utilizar el poder de CSS de esa manera.

No, no lo hace. La parte relevante del estándar W3C no menciona el orden de aparición de las clases.

No, como dice, si dos reglas tienen la misma especificidad, se aplicará la que viene más tarde en su CSS.