lorsque deux classes affectées à une division sont supprimées

Question

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

Peut-on attribuer deux classes à un <div> tag ? Si oui, laquelle l'emporte sur l'autre ou laquelle est prioritaire ?

Answer 1

Il est possible d'attribuer plusieurs classes à une division. J

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

Cette division correspondra ensuite à toutes les règles de style de trois sélecteurs de classe différents : .rule1 , .rule2 y .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. 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é de la CSS détermine la règle qui 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 feuille de style ultérieure) a la priorité. 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 importe si la spécificité CSS est la même.

Donc, si vous aviez des styles comme ça :

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Puisque les deux règles correspondent à la division et ont exactement la même spécificité CSS, la deuxième règle vient plus tard, elle est donc prioritaire et l'arrière-plan est rouge.

---

Si une règle avait une spécificité CSS plus élevée ( div.rule1 obtient un score plus élevé que .rule2 ) :

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Ensuite, il aurait la priorité et la couleur de fond ici serait le vert.

---

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.

Answer 2

En fait, la classe définie en dernier dans le css - est appliquée sur votre div.

Vérifiez :

rouge dernier en css

.blue{ color: blue; }
.red { color: red;  }

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

vs

bleu dernier en css

.red { color: red;  }
.blue{ color: blue; }

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

Answer 3

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

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

CSS

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

Dans l'exemple ci-dessus, on prend la dernière déclaration selon l'arbre css qui est .vert .

Answer 4

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

Renseignez-vous sur la priorité CSS pour voir comment cela fonctionne.

Answer 5

Plusieurs classes peuvent être assignées à un élément, il suffit de les séparer par un espace.

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

En raison de la cascade en CSS, les règles d'écrasement le plus près du fond du document sera appliqué à 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 de fond car elle n'a pas été écrasée.

Vous devez également tenir compte de la spécificité du CSS, si vous avez un sélecteur plus spécifique, c'est celui-ci qui sera utilisé :

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

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

.stayClassySanDiego
{
    background: black;
}

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

Vous pouvez prendre un regardez tout cela ici .