web-standards - tipos - selectores de css3
Múltiples clases CSS: solapamiento de propiedades según el orden definido (8)
Como han señalado las otras respuestas, el orden declarado en el atributo de clase no tiene efecto, la prioridad viene del orden de las declaraciones en el archivo CSS.
Sin embargo, si realmente quieres simular algo que te permite "falsificar" la prioridad en el atributo de clase, puedes intentar:
.one-first { border: 6px dashed green }
.two-first { border: 6px dashed orange }
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
Y entonces
<div class="one-first two"/>
y
<div class="two-first one"/>
Ordenará la prioridad con la última ganadora (en una línea similar a la propiedad de CSS que viene con prioridad pasada).
¿Hay una regla en CSS que determina el orden en cascada cuando se definen varias clases en un elemento? ( class="one two" vs class="two one" )
En este momento, parece que no hay tal efecto.
Ejemplo: ambos divs son de color naranja en Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
</style>
</head>
<body>
<div class="one two">
hello world
</div>
<div class="two one">
hello world
</div>
Creo que está claro que no se aplica tal regla. La regla .one tiene la misma especificidad que la regla .two , por lo que, de acuerdo con el estándar CSS, las propiedades en el bloque .one anulan aquellas en la .one porque el bloque .one aparece más adelante. No se hace referencia alguna al orden de las palabras en el atributo de class .
Cuando utilice varias clases para definir una hoja de estilo de un elemento, puede usar la !important para anular la "cascada" de la hoja de estilo.
.one { border: 6px dashed green !important }
.two { border: 6px dashed orange }
Hará tus divs verdes.
Depende de cuál se declara el último en su hoja de estilo. Por ejemplo,
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
vs
.two { border: 6px dashed green }
.one { border: 6px dashed orange }
El orden del atributo de clase no importa un bit. Depende de varias cosas, en tu caso es el orden en que se escribe tu css.
Ambos estilos tienen la misma especificidad, por lo que el estilo .two anula el estilo de .one porque es más bajo en la etiqueta de estilo.
En caso de duda, ver la página en FireBug. Elimina las clases que están anuladas y muestra el orden en que se aplican en la página.
También tenga en cuenta que los estilos en línea anularán los declarados en una hoja de estilo externa. Si desea romper la cadena en cascada de la aplicabilidad, puede utilizar la declaración ! Important!
p {margin: 10px 5px 0 10px !important}
Esto causará que la declinación importante anule a otros sin importar la posición. Algunos lo ven como una mala práctica, pero puede ser útil si se usa con criterio.
La clase definida última en el CSS es lo que gana en estos casos. El orden en el elemento no importa, esto es consistente en todos los navegadores que conozco, intentaré e indico los bits de especificación relevantes.
La clase completa no gana, las propiedades ganan individualmente, si el .one tenía una propiedad que .two no vería esa propiedad en ambos elementos <div> .
la anulación se realizará en el orden en que se declaran las clases. así que .two siempre gana