¿Importa el orden de una clase en un selector? Si es así, ¿puedo especificar el pedido?

Question

¿Existe una diferencia entre:

<span id="test" class="one two"></span> 

y

<span id="test" class="two one"></span> 

Si hay conflicto de reglas CSS en estas clases hace la materia orden?

¿Hay alguna API en jQuery para reordenar? Cuando llamo al addClass(), ¿siempre sale al final?

Answer 1

El orden no importa.

http://jsfiddle.net/rc8Yu/

css precedence

La parte importante aquí es

Si dos reglas son iguales en todo lo anterior, la declarada últimos triunfos. CSS embebido en el html siempre vienen después de estilo externas, independientemente del orden en el html

Answer 2

El orden de las clases en HTML no no importa, pero el orden dentro del CSS sí importa. Por ejemplo, si usted tenía:

span.one { color: red } 
span.two { color: blue } 

Ambos se extiende con class="one two" y class="two one" produciría texto azul, porque la clase "dos" se define pasado. Pero si cambiamos eso a

span.two { color: blue } 
span.one { color: red } 

e hizo lo mismo, ambos tramos ahora tendrían texto de color rojo debido a que el "uno" clase se define pasado. También hay que tener en cuenta que el ID anulará tanto de esas clases no importa qué, por lo que si he definido:

span#test { color: green } 

y ha añadido id="test", a continuación, los tramos tendrán siempre el texto en verde, no importa en qué parte del documento de las clases y El selector de ID está definido, porque un ID es naturalmente más específico que una clase (otras instancias pueden hacer que una clase sea más específica que una ID, etc.).

---

Dado que esto es cierto, el orden de sus clases asignado por jQuery es completamente irrelevante. No debería tener que preocuparse por reordenarlos, pero sí, addClass solo agrega la clase al final de la lista.

Answer 3

Si usa la propiedad DOM classList, el pedido es significativo.

El objeto devuelto tiene las clases establecidas como propiedades numéricas; orden ascendente como los nombres de clase de izquierda a derecha.

jsFiddle.