web-dev-qa-db-fra.com

Plusieurs classes CSS: chevauchement des propriétés en fonction de l'ordre défini

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

À l'heure actuelle, il ne semble pas y avoir un tel effet.

Exemple: les deux divs sont de couleur orange sur 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>
web-standardscss
57
nonopolarity

Cela dépend du dernier déclaré 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 }
72
edl

La classe définie dernière 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 que je connais, je vais essayer d'indiquer les bits de spécification pertinents.

La classe entière ne gagne pas, les propriétés gagnent individuellement, si le .one avait une propriété qui .two n'est-ce pas que vous verriez bien cette propriété sur ces deux <div> éléments.

21
Nick Craver

Comme les autres réponses l'ont noté, l'ordre déclaré dans l'attribut class n'a aucun effet - la priorité vient de l'ordre des déclarations dans le fichier CSS.

Cependant, si vous voulez vraiment simuler quelque chose qui vous permet de "fake" la priorité dans l'attribut 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 }

Puis

   <div class="one-first two"/>

et

   <div class="two-first one"/>

Ordonnera la priorité avec le dernier gagnant (dans la même veine que la propriété CSS qui vient en dernier en priorité.)

4
mdma

Lorsque vous utilisez plusieurs classes pour définir une feuille de style d'élément, vous pouvez utiliser le !important pour remplacer la "cascation" de la feuille de style.

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

Cela rendra vos divs vertes.

3
CARLOS LOTH

L'ordre de l'attribut de classe 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.

2
Ben Rowe

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, donc selon la norme CSS, les propriétés du .two le bloc remplace ceux du .one parce que le .two le bloc apparaît plus tard. Aucune référence n'est faite nulle part à l'ordre des mots dans l'attribut class.

2
hobbs

le remplacement se produira dans l'ordre dans lequel les classes sont déclarées. donc .two gagne toujours

1
Sonic Soul

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

Notez également que les styles en ligne remplaceront ceux déclarés dans une feuille de style externe. Si vous voulez rompre la chaîne en cascade avec l'applicabilité, vous pouvez utiliser la déclaration ! Important comme dans

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

Cela entraînera la déclinaison ! Important pour remplacer les autres quelle que soit la position. Certains y voient une mauvaise pratique, mais elle peut être utile si elle est utilisée judicieusement.

1
Laramie