Quel est l'ordre de priorité du sélecteur CSS ? Introduction à la priorité du sélecteur de base CSS

Il existe de nombreux types de sélecteurs en CSS, donc la notion de priorité apparaîtra naturellement. Alors, quel est l'ordre de priorité des sélecteurs CSS ? Cet article vous présentera l’ordre de priorité des sélecteurs CSS. Sans plus tarder, passons directement au texte principal.

Avant d'examiner l'ordre de priorité des sélecteurs CSS, parlons brièvement de Quels sont les sélecteurs CSS de base ?

1. Sélecteur de balise (tel que : body, div, p, ul, li)

2. Sélecteur d'ID (tel que : id="name", id="name_txt")

3. Sélecteur de classe (tel que : id="name",id="name_txt")

4. Sélecteur de descendant (tel que : #head .nav ul li du parent défini sur Sélecteur d'ensemble descendant)

5. Sélecteur d'élément enfant (tel que : div>p, avec le signe supérieur à>)

6. Sélecteur de pseudo-classe (tel que : style de lien, pseudo- classe d'un élément, 4 états différents : lien, visité, actif, survol. )

Après avoir examiné les types de sélecteurs CSS de base, jetons un œil au concept de priorité CSS.

Lorsque deux règles s'appliquent au même élément html, si les attributs définis sont en conflit, dont la valeur doit être utilisée et dont la valeur est utilisée aura une priorité plus élevée.

Regardons l'algorithme de priorité du sélecteur CSS :

Chaque règle correspond à un "numéro à quatre chiffres" initial : 0, 0, 0, 0

S'il s'agit d'un sélecteur en ligne, ajoutez 1, 0, 0, 0
S'il s'agit d'un sélecteur d'ID, ajoutez 0, 1, 0, 0
S'il s'agit d'un sélecteur de classe/sélecteur de pseudo-classe , ajoutez 0 respectivement, 0, 1, 0
S'il s'agit d'un sélecteur d'élément, ajoutez 0, 0, 0, 1
respectivement. Algorithme : Ajoutez les nombres correspondant aux sélecteurs dans chaque règle pour obtenir les "quatre". -numéro à chiffres", comparé de gauche à droite, le plus grand a la priorité la plus élevée. ​

Après avoir lu le contenu ci-dessus, examinons l'ordre spécifique de

priorité du sélecteur CSS.

L'ordre de priorité du sélecteur CSS du plus élevé au plus bas est :

1.id sélecteur (#myid)

2. (.myclassname)

3. Sélecteur de balise (div, h1, p)

4. Sélecteur d'enfant (ul < li)

5. Sélecteur de descendants (li a )

6. Sélection de pseudo-classe (a:hover, li:nth-child)

Enfin, ce qu'il faut noter est :

!important La priorité est le plus élevé, mais lorsqu'un conflit survient, les « quatre chiffres » doivent être comparés

Lorsque les priorités sont les mêmes, le principe le plus proche est adopté et le dernier style est sélectionné
La priorité des attributs hérités ; le plus bas.

Ce qui précède représente l'intégralité du contenu de cet article. Bien sûr, il existe plus que les six sélecteurs ci-dessus sur les sélecteurs CSS. Pour plus d'informations sur les sélecteurs CSS, veuillez vous référer au

manuel d'utilisation CSS.

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!