Introduction détaillée à l'ordre de priorité des sélecteurs en CSS

Quelle est la particularité

Lors de l'application de styles CSS à un élément HTML, il existe souvent de nombreuses façons de trouver l'élément, telles que :

<p id="container" class="wrap_sty">   
    <p class="pra">这是一个段落</p>   
</p>   
<style>   
    #container p { color:red }   
    p p { color:green }   
    p { color:yellow }    
</style>

On constate qu'il existe de nombreuses façons d'agir sur un élément HTML, bien plus que celles-ci. Ainsi, si plusieurs styles identiques sont appliqués à un élément, quel style sera affiché à la fin ? CSS utilise une méthode appelée spécificité pour prioriser plusieurs sélecteurs.

Spécificité CSS
La spécificité des sélecteurs est divisée en 4 niveaux, a b c d, de gauche à droite, le plus à gauche est prioritaire, s'il y a plusieurs règles de sélection Pour les sélecteurs du même type, 1.
S'il s'agit d'un style interne HTML, alors la spécificité est prioritaire, a=1
La spécificité du sélecteur d'identifiant est b, et le
sélecteur de classe, le sélecteur de pseudo-classe et le sélecteur d'attribut sont c
Le sélecteur d'étiquette et le sélecteur de pseudo-éléments sont d
Parlons d'abord de quelques types de sélecteur :
Sélecteur 1.id

#myid { ... }

2. Sélecteur de classe

.myclass { ... }

3. 🎜>4. Sélecteur d'attribut

p { ... }

Étant donné que la plupart des documents tels que W3CSCHOOL ne l'expliquent pas en détail, beaucoup de gens peuvent penser que le sélecteur d'attribut est un tel p [title="mytitle"] ou #id[title="mytitle"], etc., est un sélecteur d'attribut à proprement parler, ce n'est pas un pur sélecteur d'attribut, mais une combinaison de sélecteur d'identifiant et de balise, etc. sont composés de sélection d’attributs.

5. Sélecteur de pseudo-classe

[title="mytitle"] { ... }

Les sélecteurs de pseudo-classe courants sont : Pseudo-classe de lien, :link, :visited , pour les éléments d'ancrage.

Pseudo-classes dynamiques, :hover, :focus, :active, pour toute sélection.

p:hover { ... }

6. Sélecteur de pseudo-éléments

Le pseudo-élément et la pseudo-classe sont des concepts complètement différents car ils sont appelés pseudo-éléments. peut en effet générer un élément HTML virtuel, mais le pseudo-élément ne peut pas être obtenu par le DOM. Il existe de nombreuses applications des pseudo-éléments, les plus courantes sont : après avoir effacé les flotteurs :

p::after { ... }   
p::before { ... }

Exemple de spécificité CSS

<ul>   
    <li>A</li>   
    <li>B</li>   
</ul>   
<style>   
    li { float:left }   
    ul::after { content: ""; display: block; clear: both }   
</style>

Voici quelques exemples de spécificité du sélecteur CSS :

Si deux règles ont la même spécificité, celle définie ultérieurement remplacera celle définie en premier.

Importance CSS

选择器	特殊性	以10为基数的特殊性
style="color: red"	1, 0, 0, 0	1000
#id {}	0, 1, 0, 0	100
#id #aid	0, 2, 0, 0	200
.sty {}	0, 0, 1, 0	10
.sty p[title=""] {}	0, 0, 2, 0	20
p:hover {}	0, 0, 1, 0	10
p {}	0, 0, 0, 1	1
ul::after {}	0, 0, 0, 1	1
p p {}	0, 0, 0, 2	2

Il y a une autre chose dans CSS qui peut ignorer la spécificité, et c'est !important Les propriétés CSS utilisant cette balise ont toujours la priorité.

Le deuxième style aura priorité sur le premier, même si le sélecteur d'identifiant est plus spécifique que le sélecteur de classe. Si les deux propriétés ont !important alors la spécificité détermine la priorité.

#id { color: red }   
.class { color: yellow !important }

Le résultat est que le premier style prime sur le second.
La prise en charge de !important par IE6 n'est pas complète. Dans IE6, si l'attribut !important est défini en premier dans un sélecteur, puis que le même attribut sans !important est défini plus tard, alors !important ne sera pas valide.

#id { color: red ！important }   
.class { color: yellow !important }

Dans IE6, il ne peut pas être jauni, alors voyons un peu de sang !
IE6/7 peut également ajouter quelques ingrédients après !important sans perdre le goût, mais il est recommandé de ne pas être si ennuyeux !

p {   
  color: yellow !important;     
  color: red;   
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!