À mesure que les feuilles de style que vous créez deviennent de plus en plus complexes, le style d'une balise sera affecté par de plus en plus de facteurs. Cette influence peut provenir des balises environnantes, ou de la balise elle-même. Ci-dessous, nous allons examiner la priorité des styles CSS sous ces deux aspects.
Héritage CSS
La fonction d'héritage de CSS désigne le fait que les propriétés CSS appliquées à une balise sont transmises à ses balises enfants. Observez la structure HTML suivante :
<div>
<p></p>
</div>
Si<div>a une propriétécolor: red, alors cette propriété sera<p>héritée, c'est-à-dire,<p>a aussi la propriétécolor: red。
Comme on peut le voir ci-dessus, lorsqu'une page web est relativement complexe et que la structure HTML est profondément imbriquée, le style d'une balise est fortement influencé par les styles de ses balises ancêtres. La règle d'influence est :
Règle de priorité CSS 1 :Le style de l'ancêtre le plus proche a une priorité plus élevée que les styles des autres ancêtres.
Exemple 1 :
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
Si nous appelons les propriétés qu'une balise hérite de ses ancêtres mais qu'elle ne possède pas en propre « styles d'ancêtres », alors les « styles directs » sont les propriétés qu'une balise possède directement. Il existe également la règle suivante :
Règle de priorité CSS 2 :Les « styles directs » ont une priorité plus élevée que les « styles d'ancêtres ».
Exemple 2 :
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
Priorité des sélecteurs
Ci-dessus, nous avons discuté des propriétés qu'une balise hérite de ses ancêtres ; discutons maintenant des propriétés qu'une balise possède en propre. Avant de discuter de la priorité CSS, parlons d'abord des 7 sélecteurs CSS de base :
Sélecteur d'ID, par exemple, #id{}
Sélecteur de classe, par exemple, .class{}
Sélecteur d'attribut, par ex., a[href="segmentfault.com.html"]{}
Sélecteur de pseudo-classe, par ex., :hover{}
Sélecteur de pseudo-élément, par ex., ::before{}
Sélecteur de balise, par ex., span{}
Sélecteur universel, par ex., *{}
Règle de priorité CSS 3 :Relation de priorité : styles en ligne > sélecteurs d'ID > sélecteurs de classe = sélecteurs d'attribut = sélecteurs de pseudo-classe > sélecteurs de balise = sélecteurs de pseudo-élément
Exemple 3 :
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
La couleur finale est noire, car les styles en ligne ont une priorité plus élevée que les autres sélecteurs.
Tous les sélecteurs CSS sont composés des 7 sélecteurs de base ci-dessus ou de leurs combinaisons. Il existe 3 façons de les combiner :
Sélecteur descendant : .father .child{}
Sélecteur enfant : .father > .child{}
Sélecteur de frère adjacent : .bro1 + .bro2{}
Lorsqu'une balise est sélectionnée par plusieurs sélecteurs en même temps, nous devons déterminer la priorité de ces sélecteurs. Nous avons la règle suivante :
Règle de priorité CSS 4 :Comptez le nombre de sélecteurs d'ID dans le sélecteur (a), comptez la somme du nombre de sélecteurs de classe, de sélecteurs d'attribut et de sélecteurs de pseudo-classe dans le sélecteur (b), et comptez la somme du nombre de sélecteurs de balise et de sélecteurs de pseudo-élément dans le sélecteur (c). Comparez les valeurs dans l'ordre a, b et c ; la plus grande a une priorité plus élevée, et si elles sont égales, comparez la suivante. Si deux sélecteurs ont finalement des a, b et c égaux, alors jugez selon le « principe de proximité ».
Exemple 4 :
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
Comme on peut le voir d'après la règle 4, la couleur de <span> est rouge.
Que se passe-t-il si les styles d'une feuille de style externe et d'une feuille de style interne entrent en conflit ? Cela dépend de la position de la feuille de style dans le fichier HTML. Plus la position où le style est appliqué est basse, plus sa priorité est élevée ; en fait, cela peut encore s'expliquer par la règle 4.
Exemple 5 :
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css.html">
<style type="text/css">
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
En termes d'ordre, le style interne est en bas et est référencé en dernier, donc la couleur d'arrière-plan de <div> est bleue.
Dans le code ci-dessus, l'instruction@importdoit apparaître avant le style interne, sinon l'importation du fichier est invalide. Bien sûr, il n'est pas recommandé d'utiliser@importMéthodes d'importation CSSMéthodes d'importation CSS。
CSS fournit également un moyen d'ignorer complètement les règles ci-dessus. Lorsque vous devez absolument garantir qu'une propriété spécifique est affichée, vous pouvez utiliser cette technique.
Règle de priorité CSS 5 :Si une propriété est suivie de!importantalors la propriété a la priorité la plus élevée. Si les deux contiennent!important, alors utilisez les règles 3 et 4 pour déterminer la priorité.
Exemple 6 :
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
Bien que .father .son ait un poids plus élevé, la propriété background dans le sélecteur p est insérée avec !important, donc l'arrière-plan de <p> est rouge.
Affirmations incorrectes
Dans le processus d'apprentissage de CSS, vous avez peut-être entendu parler d'une « valeur de pondération de sélecteur » qui dit : le poids d'un sélecteur d'ID est 100, celui d'un sélecteur de classe est 10, celui d'un sélecteur de balise est 1, puis on les additionne et on compare. Bien que cette façon de comprendre soit facile à retenir en surface, elle est en réalité fausse.
Par exemple, il y a deux sélecteurs :
.class1.class2.class3 ... （共11个类） #id
Si vous calculez avec la méthode de l'« addition », vous penseriez que le premier a un poids de 110, le second de 100, et que le premier devrait l'emporter. Mais en réalité, le navigateur choisit le style du second (celui avec #id).
Pourquoi ? Parce que CSS ne traite pas les poids des sélecteurs comme une « addition décimale ». La comparaison de priorité en CSS est essentiellement une comparaison hiérarchique, que l'on peut comprendre comme une comparaison à quatre chiffres :
- Styles en ligne : 1,0,0,0
- Sélecteurs d'ID : 0,1,0,0
- Sélecteurs de classe, sélecteurs d'attribut, pseudo-classes : 0,0,1,0
- Sélecteurs de balise, pseudo-éléments : 0,0,0,1
Le navigateur les compare de gauche à droite, et non en les additionnant. Peu importe combien de sélecteurs de classe vous avez, ils ne peuvent pas surpasser un sélecteur d'ID.
Alors, cessez d'utiliser la méthode « 100+10+1 ». Le poids n'est pas un jeu d'addition ; c'est une comparaison hiérarchique structurelle !