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

Question

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

Demandé el 17 de Juin, 2010: Quand la question a-t-elle été
9710 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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" vs 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>

Demandé el 17 de Juin, 2010 par 動靜能量

Answer 1

5 Réponses

Answer 2

76voto

edl Points 2075

Cela dépend de celui 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 }

Répondu el 17 de Juin, 2010 par edl (2075 Points )

Answer 3

22voto

Nick Craver Points 313913

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 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 les .one avaient une propriété que .two ne verraient pas, bien sûr, cette propriété sur ces deux <div> éléments.

Répondu el 17 de Juin, 2010 par Nick Craver (313913 Points )

Answer 4

4voto

mdma Points 33973

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

Toutefois, si vous voulez vraiment se moquer de quelque chose qui vous permet de "faux", la priorité dans l'attribut de classe, 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 puis

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

et

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

Ordre de la priorité à la dernière gagnante (dans une veine similaire à la CSS proprty qui est à la dernière priorité.)

Répondu el 18 de Juin, 2010 par mdma (33973 Points )

Answer 5

3voto

Carlos Loth Points 2083

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.

Répondu el 17 de Juin, 2010 par Carlos Loth (2083 Points )

Answer 6

2voto

hobbs Points 71946

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 bloc .two remplacent celles du .one car le bloc .two apparaît plus tard. Aucune référence n'est faite nulle part à l'ordre des mots dans l'attribut class .

Répondu el 17 de Juin, 2010 par hobbs (71946 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: