Algorithme de priorité lorsque les règles CSS sont en cascade

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 :

<p style="color:red;">This is a paragraph.</p>

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 c9ccee2e6ea535a969eb3f532ad9fe89 :

<style type="text/css" media="screen"> 
    p{ 
        color : red; 
    } 
</style>

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 2cdf5bf648cf2f33323966d7f58a7f3f ou l'instruction @import pour les importer en HTML.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

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 :

<p class="intro" style="color:red;">This is a paragraph.</p>

Tout en utilisant le style en ligne ci-dessus, nous l'utilisons également dans notre style externe :

p{ 
    color : yellow; 
}

Nous avons même The 8264f80bd003dc1481a741b88a085d37 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é.