Comment les priorités du sélecteur CSS sont-elles déterminées ?

Dans le processus de construction d'un site Web, le CSS est un attribut important pour contrôler le style des pages Web. Cet article résumera donc et vous présentera les connaissances pertinentes sur les sélecteurs de classe CSS et le classement des priorités CSS.

Tout d'abord, laissez-moi vous présenter les types de sélecteurs CSS :

1. Sélecteur de nom de balise

Selon le nom de balise spécifié, recherchez tous les noms de. ce nom dans l'étiquette de l'interface actuelle, puis définissez les propriétés.

Le sélecteur de balises sélectionne toutes les balises portant ce nom dans l'interface actuelle et ne peut pas sélectionner une seule balise individuellement ; le sélecteur de balises peut la trouver quelle que soit la profondeur de la balise ; balise en HTML Les deux peuvent être utilisés comme sélecteurs de balises.

2. Sélecteur de classe

Recherchez la balise correspondante en fonction du nom de classe spécifié, puis définissez les attributs.

Chaque balise HTML a un attribut de classe, ce qui signifie que chaque balise peut définir une classe ; la classe ne peut pas être répétée dans la même interface ; lors de l'écriture du sélecteur d'identifiant, elle doit être ajoutée avant la classe ; La convention de dénomination pour les noms de classe est la même que la convention de dénomination id ; le nom de classe est spécifiquement conçu pour définir le style d'une balise spécifique ; en HTML, chaque balise peut être liée à plusieurs noms de classe en même temps.

3. Sélecteur d'identification.

Recherchez la balise correspondante en fonction du nom d'identification spécifié, puis définissez les attributs.

Chaque balise HTML a un attribut id, ce qui signifie que chaque balise peut définir un identifiant ; l'identifiant ne peut pas être répété dans la même interface ; lors de l'écriture d'un sélecteur d'identifiant, assurez-vous d'ajouter # avant l'identifiant ; Le nom de l'identifiant a certaines spécifications. Le nom de l'identifiant ne peut être composé que de lettres, de chiffres et de traits de soulignement ; il ne peut pas commencer par un chiffre ; il ne peut pas s'agir d'un mot-clé dans le développement d'une entreprise, généralement s'il s'agit simplement de définir le style, nous n'utiliserons pas l'identifiant ; , car l'identifiant est pour js .

Comment diviser le classement des priorités CSS ?

De manière générale, plus un sélecteur est spécial, plus sa priorité est élevée. Autrement dit, plus le sélecteur pointe avec précision, plus sa priorité est élevée.

Habituellement, nous utilisons 1 pour indiquer la priorité du sélecteur de nom de balise, 10 pour indiquer la priorité du sélecteur de classe et 100 pour indiquer la priorité du sélecteur d'ID.

Par exemple, dans l'exemple ci-dessus, la priorité du sélecteur de .polaris span {color:red;} est de 10 + 1, soit 11 tandis que la priorité de .polaris est de 10 ; mots rouges. Après avoir compris ce principe, le calcul de priorité suivant est simple :

div.test1 .span var priorité 1+10 +10 +1

span#xxx .songs li priorité 1 +100 + 10 + 1

#xxx li Priorité 100 +1

Quant à quel sélecteur utiliser dans quelles circonstances, le principe de l'utilisation de différents sélecteurs est :

Non Un : Précisément. sélectionnez les balises à contrôler ;

Deuxièmement : utilisez le sélecteur avec la priorité la plus raisonnable

Troisième : Gardez les codes HTML et CSS aussi concis et beaux que possible ;

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!