Algorithme de priorité lorsque les règles CSS sont en cascade-tutoriel CSS-php.cn

La priorité des règles CSS est un concept que les développeurs web front-end doivent comprendre. Il existe 4 méthodes couramment utilisées pour ajouter des styles.

1. Style en ligne 2. Style intégré 3. Style externe 4. Style utilisateur

Le style en ligne est moche, ils font la navette dans le document HTML, Tangled. avec les éléments HTML, cela pose beaucoup de problèmes aux développeurs Web front-end. Ils apparaissent souvent comme ceci :

This is a paragraph.

Copier après la connexion Le style intégré est plus gentleman que le style en ligne. Ils résident également dans les documents HTML, mais ils ne prennent pas la peine de s'embrouiller avec les éléments HTML. Ils apparaissent souvent dans les éléments :

p{ color : red; } Copier après la connexion le style externe est un aristocrate. Il ne veut pas rester avec le HTML, il existe donc simplement de manière indépendante sous la forme d'un fichier externe. . Habituellement, nous utilisons l'élément ou l'instruction @import pour les importer en HTML.

Copier après la connexion Nous devrions utiliser le style externe autant que possible. Je pense qu'il y a plusieurs raisons. Tout le monde le sait, donc je ne le répéterai pas.

Il existe également un style d'utilisateur légèrement différent des trois ci-dessus. Si vous utilisez le navigateur IE, vous pouvez trouver la méthode pour ajouter un style d'utilisateur sous Outils – Options Internet – Général – Apparence – Accessibilité – Utilisateur. place de la feuille de style (pardonnez-moi de ne pas avoir de version chinoise du navigateur IE).

Comme nous avons tant de façons d'ajouter des styles, il est difficile d'éviter la cascade de styles. Par exemple :

This is a paragraph.

Copier après la connexion Tout en utilisant le style en ligne ci-dessus, nous l'utilisons également dans notre style externe :

p{ color : yellow; } Copier après la connexion Nous avons même The

p.intro{ color : blue; } Copier après la connexion De cette façon, nous avons plusieurs règles CSS spécifiant des valeurssur la même couleur d'attribut du même élément. Cette situation est appelée cascade. Lorsqu'une cascade se produit, CSS Parser déterminera la valeur finale sélectionnée en fonction d'un algorithme de priorité.

L'algorithme de priorité considère dans l'ordre les trois aspects suivants : 1. L'importance et la source des règles CSS 2. La particularité des règles CSS 3. ordre d'apparition

Le processus algorithmique est divisé en quatre étapes :

1. Pour un certain attribut d'un certain élément, Répertorie toutes les règles CSS qui attribuent une valeur à cette propriété. Dans l'exemple ci-dessus, sur l'élément de class="intro", il y a trois règles CSS spécifiant l'attribut color.

2. Priorisez selon l'importance et la source de la déclaration

Il existe deux types d'importance : importante et normale (c'est-à-dire non importante)

L'importance d'ajouter !important après les règles CSS est plus importante que de ne pas l'ajouter.

Il existe trois sources :

feuille de style de l'agent utilisateur – style par défaut du navigateur

feuille de style de l'auteur – style défini par le développeur

feuille de style utilisateur – navigation de l'utilisateur La priorité des styles définis dans l'outil

de bas en haut est :

feuille de style de l'agent utilisateur

règles normales dans les feuilles de style utilisateur

Règles normales dans l'auteur feuilles de style

Règles importantes dans les feuilles de style auteur

Règles importantes dans les feuilles de style utilisateur

Après le tri ci-dessus, s'il y a une règle CSS a une priorité plus élevée que toutes les autres règles de compétition, l'algorithme se termine et la valeur spécifiée par la priorité la plus élevée est renvoyée. S'il existe plusieurs règles CSS avec la priorité la plus élevée, elles continueront à être en concurrence et l'algorithme passera à l'étape 3.

3. Trier par spécificité

CSS calculera la valeur de spécificité du sélecteur spécifié dans chaque règle dans plusieurs règles.

La valeur de particularité est une valeur de type tableau composée de 4 entiers : a, b, c, d, où a a le poids le plus élevé, et ainsi de suite, d a le poids le plus faible. La méthode de calcul de la valeur de spécificité du sélecteur est : Si la règle est un style en ligne, alors a = 1 Si la règle est spécifiée par le sélecteur, le nombre de sélecteurs d'identifiant apparaissant dans le sélecteur est la valeur de b Si la règle est spécifiée par le sélecteur. La somme du nombre de sélecteurs d'attributs (y compris le sélecteur de classe) ou de sélecteurs de pseudo-classe apparaissant dans le sélecteur est la valeur de c Si la règle est spécifiée par le sélecteur, le sélecteur d'élément ou pseudo-élément apparaissant dans le sélecteur est La somme des quantités est la valeur de d. La valeur de spécificité du

sélecteur universel * est de 0,0,0,0.

Le site officiel fournit quelques exemples pour approfondir la compréhension.

Lors du tri selon la valeur de spécificité, puisque a a le poids le plus élevé, a est comparé en premier si a est identique, b est comparé, et ainsi de suite. Par conséquent, quelle que soit la taille des valeurs de b, c et d, le style en ligne a toujours la spécificité la plus élevée.

Si, après le tri selon les particularités ci-dessus, il existe une règle CSS avec une priorité plus élevée que toutes les autres règles concurrentes, alors l'algorithme se termine et la valeur spécifiée par la priorité la plus élevée est renvoyée. S'il existe plusieurs règles CSS avec la priorité la plus élevée, elles continueront à être en concurrence et l'algorithme passera à l'étape 4.

4. Comparez l'ordre dans lequel les règles CSS apparaissent dans le document

Celle qui apparaît plus tard a toujours une priorité plus élevée que celle qui apparaît plus tôt, donc elle apparaît dans La dernière instruction sera utilisée comme valeur de la propriété.