Partager une analyse détaillée des priorités CSS

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

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 avant de parler de priorité CSS, nous devons comprendre ce qu'est 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, les amis qui travaillent dans la production de pages Web devraient rarement avoir 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 le CSS et du rôle qu'il joue. Je crois que les amis qui sont engagés dans la production de pages Web y ont déjà été plus ou moins exposés.

Retour aux choses sérieuses, passons au sujet du jour :

1. Qu'est-ce que la priorité CSS ?

La soi-disant 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 se mettre d'accord sur cette priorité, et cette "règle" est celle-ci. il faut le dire.

Les particularités de la feuille de style décrivent 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. Compte le nombre d'attributs CLASS dans le sélecteur.

3. Compte 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 est représenté par 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. Ajouter à chaque sélecteur de classe (.someclass), chaque sélecteur d'attribut (formé comme [attr=value], etc.), et chaque pseudo-classe (formée comme : survol, etc.) .) 0,0,1,0.

3. Ajoutez 0,0,0,1 à chaque élément ou pseudo-élément (:firstchild) etc.

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 des sélecteurs classés par caractéristiques

Voici une liste de sélecteurs classés par caractéristiques :

Sélecteur

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	2
.apple {color:red;}	10
p.bright {color:yellow;}	11
p.bright em.dark {color:brown;}	22
#id316 {color:yellow}	100

Valeur caractéristique td>

h1 {color:blue;}

1

p em {color:purple;}

2

.apple {color:red;}

10

p.bright {color:jaune;}

11

p.bright em. foncé {color:brown;}

22

#id316 {color:jaune>

100

En regardant seul le tableau ci-dessus, cela semble difficile à comprendre. Voici un autre tableau :

<. tr class="firstRow">p. brillant em.dark {color:brown;>

sélecteur

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	1 1=2
.apple {color:red;}	10
p.bright {color:yellow;}	1 10=11
p.bright em.dark {color:brown;}	1 10 1 10=22
#id316 {color:yellow}	100

Valeur des fonctionnalités

h1 {color:bleu;>

1

p em {color:purple;}

1 1=2

.apple {color:red;>

10

p.bright {color:jaune;>

1 10=11

1 10 1 10=22

#id316 {color:jaune} td>

100

D'après ce qui précède, vous pouvez facilement 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é. Il y a en fait de nombreux problèmes en jeu.

En parlant de ça, il faut parler de l'héritage du CSS.

4. Héritage du CSS

4.1 Performance de l'héritage

L'héritage est CSS Un majeur La particularité est qu'il repose sur les relations ascendants-descendants. L'héritage est un mécanisme qui permet d'appliquer des styles non seulement à un élément spécifique, mais également à ses descendants. Par exemple, une valeur de couleur définie par BODY sera également appliquée au texte du paragraphe.

Définition du style :

body {color:#f00;}

Exemple de code :

Test d'héritage

Exemple d'effet :

Ce code Le résultat du l'application est : "Test de l'héritage CSS" est en rouge et les mots "héritage" sont en gras à cause de la balise . Bien évidemment, ce texte hérite de la couleur définie par le style body {color:#f00;}. C'est pourquoi l'héritage fait partie du CSS.

Cependant, le poids de l'héritage CSS est très faible, qui est de 0, ce qui est inférieur au poids des éléments ordinaires.

On prend toujours l'exemple de code ci-dessus comme exemple : ajoutez une ligne dans la définition du style :

strong {color:#000;}

Exemple d'effet :

Nous avons constaté que le simple ajout d'une valeur de couleur à peut remplacer la couleur de style dont il hérite de . On peut voir que toute règle explicitement déclarée peut remplacer son style hérité.

4.2 Limites de l'héritage

L'héritage est une partie importante du CSS Nous n'avons même pas besoin de réfléchir à la raison pour laquelle cela peut être comme ça, mais l'héritage CSS aussi. a des limites.

Certaines propriétés ne peuvent pas être héritées, telles que : border, margin, padding, background, etc.

Définition du style :

p {border:1px solid #000;}

Exemple de code :

< ;p>Je suisborderJe ne peux pas être hérité

Effet attendu :

Effet réel :

D'après l'effet ci-dessus, nous pouvons voir que la frontière ne peut pas être héritée, et il en va de même pour certains autres attributs, qui ne sont pas inclus ici. un.

5. Notes complémentaires

La priorité de style dans le texte est de 1,0,0,0, elle est donc toujours supérieure à la définition externe. Ici, les styles dans le texte font référence aux styles de la forme

blah

, tandis que les définitions externes font référence aux règles définies via les balises
Il y a avant tout des règles de déclaration !importantes.
Si les déclarations !important sont en conflit, la priorité est comparée.
Si les priorités sont les mêmes, elles seront déterminées dans l'ordre dans lequel elles apparaissent dans le code source, les dernières étant prioritaires.
Le style obtenu par héritage n'a pas de calcul de spécificité, il est inférieur à toutes les autres règles (comme les règles définies par le sélecteur global*).
Concernant les styles externes chargés via @import, puisque @import doit apparaître avant toutes les autres définitions de règles (sinon, le navigateur doit l'ignorer), donc selon le principe du dernier arrivé, premier servi, généralement les conflits de priorité prévaudront .
Il convient également de mentionner qu'IE peut reconnaître @import dans la mauvaise position, mais peu importe où se trouve @import, il le considérera comme étant avant toutes les autres définitions de règles, ce qui peut provoquer des malentendus.

La question prioritaire semble simple, mais elle cache néanmoins un mécanisme très complexe qui nécessite plus d'attention dans les applications pratiques.

6. Pratique

Après avoir lu le texte ci-dessus, posez quelques questions très simples. (Veuillez ne pas lire l'adresse du lien indiquée dans chaque question avant d'y répondre vous-même)

1. Comment utiliser deux éléments avec le même nom de style pour avoir des effets différents :

Boîte Run Code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
.test { 
width:200px; 
border:1px solid #000; 
font:12px/200% "宋体"; 
color:#f00; 
background:#ddd; 
} 
p.test { 
color:#fff; 
background:#070; 
} 
</style> 
</head> 
<body> 
<div class="test">测试测试测试</div> 
<p class="test">测试测试测试</p> 
</body> 
</html>

Astuces : Vous pouvez modifier une partie du code avant d'exécuter

Effet fixe :

固定代码：

2. 如何让

始终为黑色，而在不被

包含的情况为红色：

提示：您可以先修改部分代码再运行

传说中的测试

传说中的测试

 

固定效果：

固定代码：

讨论CSS优先级

讨论CSS优先级

3. 如何写一个外部样式使得

覆盖我

的颜色为红色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
h3 { 
color:#f00!important; 
} 
</style> 
</head> 
<body> 
<h3 style="color:#000;">覆盖我</h3> 
</body> 
</html>

提示：您可以先修改部分代码再运行

4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
.b { 
color:#000; 
} 
.a { 
color:#f00; 
} 
</style> 
</head> 
<body> 
<p class="a b">传说中滴测试</p> 
</body> 
</html>

提示：您可以先修改部分代码再运行

固定代码：

传说中滴测试

关于样式优先级，今天就先聊到这。

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!