Maison > interface Web > tutoriel CSS > Compréhension approfondie de l'ordre de priorité du sélecteur CSS

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

yulia
Libérer: 2018-09-18 15:03:31
original
2513 Les gens l'ont consulté

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; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/
}
Copier après la connexion

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所以显示绿色*/
}
Copier après la connexion

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只是不认识优先级罢了*/
}
Copier après la connexion

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 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 导入
Copier après la connexion

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