web-dev-qa-db-fra.com

annulation de classe lorsque deux classes affectées à un div

Je créais un <div> tag dans lequel je voulais appliquer deux classes pour un <div> tag qui serait une galerie de vignettes. Une classe pour sa position et l'autre classe pour son style. De cette façon, je pouvais appliquer le style, j'avais des résultats étranges qui m'ont amené à une question.

Deux classes peuvent-elles être affectées à un <div> tag? Si oui, lequel l'emporte sur l'autre ou lequel est prioritaire?

cssclasscss3html
56
Daniel Ramirez-Escudero

Plusieurs classes peuvent être attribuées à un div. Séparez-les simplement dans le nom de la classe avec des espaces comme celui-ci:

<div class="rule1 rule2 rule3">Content</div>

Cette div correspondra alors à toutes les règles de style pour trois sélecteurs de classe différents: .rule1, .rule2 et .rule3.

Les règles CSS sont appliquées aux objets de la page qui correspondent à leurs sélecteurs dans l'ordre où ils sont rencontrés dans la feuille de style et s'il y a un conflit entre deux règles (plus d'une règle essayant de définir le même attribut), alors Spécificité CSS détermine quelle règle a la priorité.

Si la spécificité CSS est la même pour les règles en conflit, alors la dernière (celle définie plus tard dans la feuille de style ou dans la dernière feuille de style) est prioritaire. L'ordre des noms de classe sur l'objet lui-même n'a pas d'importance. C'est l'ordre des règles de style dans la feuille de style qui compte si la spécificité CSS est la même.

Donc, si vous aviez des styles comme celui-ci:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Puis, comme les deux règles correspondent à div et ont exactement la même spécificité CSS, la deuxième règle vient plus tard, elle aurait donc la priorité et l'arrière-plan serait rouge.

Si une règle avait une spécificité CSS plus élevée (div.rule1 scores supérieurs à .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Ensuite, il prendrait la priorité et la couleur de fond ici serait verte.

Si les deux règles ne sont pas en conflit:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Ensuite, les deux règles seront appliquées.

105
jfriend00

En fait, la classe qui a défini en dernier dans le CSS - est appliquée sur votre div.

vérifiez-le:

rouge dernier en css

.blue{ color: blue; }
.red { color: red;  }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

contre

bleu dernier en css

.red { color: red;  }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
20
Erez Sason

Si vous demandez s'ils ont la même propriété, alors selon la règle CSS, prenez la dernière déclaration.

<div class="red green"></div>

CSS 

.red{
 color:red;
}
.green{
 color:green;
}

Selon l'exemple ci-dessus, il prend la dernière instruction selon l'arbre css qui est . Green.

4
sandeep

La classe définie en dernier dans le CSS est prioritaire, si rien d'autre ne s'applique.

Lisez la priorité CSS pour voir comment cela fonctionne.

3
Henrik Ammer

De nombreuses classes peuvent être affectées à un élément, vous les séparez simplement par un espace

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

En raison de la cascade en CSS, les règles d'écrasement les plus proches du bas du document seront appliquées à l'élément.

Donc si vous avez

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

La couleur rouge sera utilisée, mais pas la couleur d'arrière-plan car elle n'a pas été remplacée.

Vous devez également prendre en compte la spécificité CSS, si vous avez un sélecteur plus spécifique, celui-ci sera utilisé:

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

Le deuxième sélecteur ici sera utilisé car il est plus spécifique.

Vous pouvez prendre un regardez tout ici .

1
Kyle