Interprétez la priorité CSS pour vous

Avant de parler de priorité CSS, nous devons comprendre ce qu’est le CSS et à quoi il sert.

Tout d’abord, donnons une brève explication de CSS : CSS est l’abréviation de Cascading Style Sheets. Ses spécifications représentent une étape de développement unique dans l’histoire d’Internet. De nos jours, pour les amis qui travaillent dans la production de pages Web, rares sont ceux qui n'ont pas entendu parler de CSS, car nous avons souvent besoin de l'utiliser dans le processus de création de pages Web.

Deuxièmement : nous pouvons définir une apparence riche et facile à modifier pour le document via CSS afin de réduire la charge de travail des producteurs de pages Web, réduisant ainsi le coût de production et de post-maintenance.

En fait, il est complètement redondant de parler de ce qu'est CSS et de ses fonctions. Je pense que les amis qui travaillent dans la production de pages Web y ont déjà été plus ou moins exposés.

Plus près de chez nous, abordons le sujet d’aujourd’hui :

1. Quelle est la priorité CSS ?

La priorité CSS fait référence à l'ordre dans lequel les styles CSS sont analysés dans le navigateur.

2. Règles de priorité CSS

Puisque les styles ont la priorité, il y aura une règle pour s’entendre sur cette priorité, et cette « règle » est au centre de cet article.

La spécificité dans une feuille de style décrit le poids relatif des différentes règles. Ses règles de base sont :

1. Comptez le nombre d'attributs d'ID dans le sélecteur.
2. Comptez le nombre d'attributs CLASS dans le sélecteur.
3. Comptez le nombre de noms de balises HTML dans le sélecteur.

Enfin, écrivez les trois nombres dans le bon ordre sans ajouter d'espaces ni de virgules pour obtenir un nombre à trois chiffres (css2.1 utilise 4 chiffres). (Notez que vous devez convertir le nombre en un nombre plus grand se terminant par trois chiffres). La liste finale des numéros correspondant au sélecteur permet de déterminer facilement quelles caractéristiques du numéro le plus élevé remplacent celles du numéro le plus bas.

Par exemple:

1. Pour chaque sélecteur d'ID (#someid), ajoutez 0,1,0,0.
2. Ajoutez 0,0,1,0 à chaque sélecteur de classe (.someclass), à chaque sélecteur d'attribut (forme comme [attr=value], etc.) et à chaque pseudo-classe (forme : survol, etc.).
3. Pour chaque élément ou pseudo-élément (:firstchild), etc., ajoutez 0,0,0,1.
4. Les autres sélecteurs incluent le sélecteur global *, plus 0,0,0,0. Cela équivaut à ne pas l'ajouter, mais c'est aussi une sorte de spécificité, qui sera expliquée plus tard.

3. Liste de sélection pour la classification des fonctionnalités

Voici une liste de sélecteurs triés par attribut :

À en juger par le seul tableau ci-dessus, cela semble difficile à comprendre. Voici un autre tableau :

D'après ce qui précède, il est facile de voir que le poids de la balise HTML est de 1, le poids de CLASS est de 10, le poids de ID est de 100 et le poids hérité est de 0 (ce sera discuté plus tard).

Ajoutez les chaînes de nombres petit à petit selon ces règles pour obtenir le poids final, puis comparez-les petit à petit de gauche à droite lors de la comparaison et du choix.

Le problème de priorité est en fait un problème de résolution de conflit. Lorsque le même élément (contenu) est sélectionné par le sélecteur CSS, différentes règles CSS doivent être choisies en fonction de la priorité. De nombreux problèmes sont en réalité impliqués.

Cela dit, nous devons parler de l’héritage du CSS.