Mécanisme de priorité CSS

Priorité des styles

Styles multiples : Si des styles externes, des styles internes et des styles en ligne sont appliqués au même élément en même temps, il s'agit de styles multiples.

Généralement, la priorité est la suivante :

(Style externe) Feuille de style externe < (Style interne) Feuille de style interne < (Style en ligne) Style en ligne

Il existe une exception, c'est-à-dire que si le style externe est placé après le style interne, le style externe remplacera le style interne.

Les exemples sont les suivants :

Priorité du sélecteur

Explication :

1. Le poids maximum de la feuille de style en ligne est de 1000

2. Le poids du sélecteur de classe Class est de 10

4. Le poids du sélecteur de balise HTML est de 1

Utilisez le poids du sélecteur pour effectuer des calculs et des comparaisons. L'exemple est le suivant :

Résultat : Les données contenues dans la balise sont affichées en bleu.

Règle de priorité CSS :

A Les sélecteurs ont un poids, plus le poids est grand, plus la priorité

B Lorsque les poids sont égaux, le les paramètres de la feuille de style qui apparaissent plus tard sont meilleurs que les paramètres de la feuille de style qui apparaissent en premier ;

C Les règles du créateur sont supérieures à celles du navigateur : c'est-à-dire que le style CSS défini par le rédacteur de la page Web a un style plus élevé. priorité que celle définie par le style du navigateur ;

D Le style CSS hérité n'est pas aussi bon que le style CSS spécifié plus tard

E Dans le même ensemble de paramètres d'attribut, la priorité du la règle marquée "!important" est la plus élevée ; l'exemple est le suivant :

    

测试！

    

       

color

       

color

    

Résultat : Affiché en bleu sous Firefox ; Affiché en rouge sous IE 6

Utiliser le script pour ajouter des styles

Quand Après la connexion ; le style externe, puis en utilisant un script JavaScript pour insérer le style interne (c'est-à-dire que le style interne est créé à l'aide d'un script), le navigateur IE montre son caractère unique. Le code est le suivant :

  

  

在IE中我是绿色，非IE浏览器下我是蓝色！

Résultat : Dans Firefox/Chrome/Safari/Opera, le texte est bleu. Dans le navigateur IE, le texte est vert.

Ajouter

le code JavaScript pour ajouter du contenu de style dans IE :

var s=document.createElement("style");

var head=document.getElementsByTagName("head").item(0);

var link=document.getElementsByTagName("link").item(0);

head.insertBefore(s,link);

/* 注意：在IE 中，

   虽然代码是将