Compréhension approfondie de l'ordre de priorité du sélecteur CSS

Il existe de nombreux sélecteurs en CSS, tels que les sélecteurs de classe, les sélecteurs de balises, les sélecteurs d'ID, etc. L'ordre de priorité des différents sélecteurs est également différent. Aujourd'hui, je vais vous parler de la priorité des sélecteurs CSS. référez-vous à la commande, et à l'utilisation de !important j'espère que cela vous sera utile.

1. !important signifie la priorité la plus élevée . Le navigateur IE6 ne reconnaît pas !important .

Exemple :

Normalement, le style écrit ci-dessous a une priorité plus élevée que le style ci-dessus

demo1{
color:red;
color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/
}

Si !important est ajouté, sa priorité sera plus élevée Haute, IE6 est relativement stupide et je ne le sais pas.

demo2 {
color:red !important; /*除了ie6，其他浏览器会认为红色优先级高，显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

Mais notez que ie6 ne reconnaît pas la priorité de !important, mais cela ne signifie pas que ie6 ne reconnaît pas l'attribut style avec !important.

demo3{
color:red;
color:green !important; /*包括ie6，所有浏览器都显示绿色字体，ie6只是不认识优先级罢了*/
}

2. Feuilles de style en cascade CSS (Cascading Style Sheets). Dans les applications pratiques, il existe généralement trois méthodes de mise en cascade.

Priorité : Feuille de style en ligne (balise intérieure) > Feuille de style intégrée (dans le fichier actuel) >

1. Style externe (appliqué à plusieurs pages Web)

Dans la feuille de style externe, le code CSS est stocké dans un fichier séparé, tel que le fichier style.css qui contient tous les styles. . La cascade externe en HTML est introduite à l'aide de la balise 2cdf5bf648cf2f33323966d7f58a7f3f ou de l'instruction @import.

L'exemple de code est le suivant :

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

2cdf5bf648cf2f33323966d7f58a7f3f Les similitudes et les différences entre @import et @import peuvent être trouvées dans son article

2. En ligne (appliqué à la page actuelle)

Le code CSS du site Web du portail est généralement intégré, ce qui est communément appelé style en ligne (Inline Style), qui utilise la balise c9ccee2e6ea535a969eb3f532ad9fe89 un objet bloc interne.

L'exemple de code est le suivant :

<style type="text/css">
    body{font-family:Arial,Helvetica,sans-serif;}
</style>

Le CSS en ligne peut réduire efficacement les requêtes HTTP, améliorer les performances des pages et soulager la pression du serveur. Étant donné que le navigateur ne peut afficher la page qu'après avoir chargé le CSS, il peut empêcher le fichier CSS d'être illisible et de provoquer l'affichage de la page nue.

3. Embedded (appliqué à des balises spécifiques)

La manière la plus basique d'écrire du CSS consiste à ajouter du code directement à l'élément de balisage modifié.

L'exemple de code est le suivant :

<div style="font-family:Arial,Helvetica,sans-serif;">饿了么</div>

Bien que cela soit plus intuitif, il augmente considérablement la taille de la page et n'est pas conforme à l'idée de conception de séparation de la structure et des performances .

3. Lorsque les poids sont différents, le navigateur détermine quel style CSS de sélecteur utiliser en fonction du poids. Le style avec le poids le plus élevé sera utilisé.

Règles de poids : le poids de l'étiquette (P, span) est de 1, le poids du sélecteur de classe est de 10 et le poids du sélecteur d'identifiant peut aller jusqu'à 100.

Exemple :

div {color: red;} /*Tag, le poids est de 1*/

div span {color: green;} /*Deux tags, le le poids est 1+1=2*/

div>span {color: purple;} /*Le poids est le même que ci-dessus, donc le principe de proximité est adopté*/

.main { color: white;} /*Sélecteur de classe, la valeur de poids est 10*/

div span.warning {color: purple;} /*La valeur de poids est 1+1+10=12*/

#main .con p {couleur : jaune ;} /*Le poids est de 100+10+1=111*/

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!