Plusieurs classes CSS: Superposition de propriétés en fonction de l’ordre défini

Existe-t-il une règle dans CSS qui détermine l’ordre en cascade lorsque plusieurs classes sont définies sur un élément? ( class="one two" vs class="two one" )

À l’heure actuelle, il semble y avoir aucun effet.

Exemple: les deux divs sont de couleur orange sur Firefox

     .one { border: 6px dashed green } .two { border: 6px dashed orange }    
hello world
hello world

Cela dépend de celui qui est déclaré en dernier dans votre feuille de style. Par exemple,

 .one { border: 6px dashed green } .two { border: 6px dashed orange } 

contre

 .two { border: 6px dashed green } .one { border: 6px dashed orange } 

La classe définie en dernier dans le CSS est ce qui gagne dans ces cas. L’ordre sur l’élément n’a pas d’importance, c’est cohérent dans tous les navigateurs dont je suis au courant, je vais essayer d’indiquer les bits de spécifications pertinents.

La classe entière ne gagne pas, les propriétés gagnent individuellement, si le .one possédait une propriété qui, bien .two ne .two pas cette propriété sur ces deux éléments

.

Lorsque vous utilisez plusieurs classes pour définir une feuille de style d’élément, vous pouvez utiliser le !important pour remplacer la “cascade” de la feuille de style.

 .one { border: 6px dashed green !important } .two { border: 6px dashed orange } 

Cela rendra vos divs verts.

Comme les autres réponses l’ont noté, l’ordre déclaré dans l’atsortingbut class n’a aucun effet – la priorité provient de l’ordre des déclarations dans le fichier CSS.

Cependant, si vous voulez vraiment créer quelque chose qui vous permet de “falsifier” la priorité dans l’atsortingbut class, vous pouvez essayer:

  .one-first { border: 6px dashed green } .two-first { border: 6px dashed orange } .one { border: 6px dashed green } .two { border: 6px dashed orange } 

Et alors

  

et

  

Ordonnera la priorité avec la dernière gagnante (dans la même veine que la propriété CSS qui a la priorité.)

Je pense qu’il est clair qu’aucune règle de ce type ne s’applique. La règle .one a la même spécificité que la règle. .two , selon le standard CSS, les propriétés du bloc .two remplacent celles du .one car le bloc .two apparaît plus tard. Aucune référence n’est faite à l’ordre des mots dans l’atsortingbut de class .

la substitution aura lieu dans l’ordre dans lequel les classes sont déclarées. alors .two gagne toujours

En cas de doute, affichez la page dans FireBug. Il supprimera les classes remplacées et affichera l’ordre dans lequel elles sont appliquées dans la page.

Notez également que les styles en ligne remplacent ceux déclarés dans une feuille de style externe. Si vous voulez rompre la chaîne d’application en cas d’application, vous pouvez utiliser la déclaration !

 p {margin: 10px 5px 0 10px !important} 

Cela entraînera le déclassement important des autres, indépendamment de la position. Certains le considèrent comme une mauvaise pratique, mais cela peut être utile s’il est utilisé judicieusement.

L’ordre de l’atsortingbut class n’a pas d’importance d’un bit. Cela dépend de plusieurs choses, dans votre cas, c’est l’ordre dans lequel votre css est écrit.

Les deux styles ont la même spécificité, donc le style .two remplace le style de .one car il est plus bas dans la balise de style.