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

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 :

      /* 内部样式 */

      h3{color:green;}

    

测试！

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 :

     #redP p{

        /*两个color属性在同一组*/

        color:#00f !important; /* 优先级最大 */

        color:#f00;

     }

    

       

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 中，

   虽然代码是将

   但实际内存中，

   这也是“IE中奇怪的应用CSS的BUG”之所在！

*/

var oStyleSheet = document.styleSheets[0];

//这实际是在的外部样式中追加

oStyleSheet.addRule("h3","color:green;");

alert(oStyleSheet.rules[0].style.cssText);

alert(document.styleSheets[0].rules[0].style.cssText);

//方式2

var cssStr="h3 {color:green;}";

document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

L'ordre de téléchargement ou de rendu du navigateur IE peut être le suivant :

● L'ordre de téléchargement d'IE est de haut en bas

● L'exécution des fonctions JavaScript bloquera ; Téléchargement IE ;

● L'ordre du rendu IE est également de haut en bas

● Le téléchargement et le rendu IE sont effectués en même temps

● Lors du rendu vers ; une certaine partie de la page, toutes les parties ci-dessus ont été téléchargées (mais cela ne signifie pas que tous les éléments associés ont été téléchargés.)

● Pendant le processus de téléchargement, si une balise est rencontrée et que le fichier est intégré Il est sémantiquement interprétable (par exemple : script JS, style CSS), alors le processus de téléchargement d'IE permettra une connexion distincte pour le téléchargement à ce moment-là. Et il est analysé après le téléchargement. S'il y a une redéfinition en JS ou CSS, les fonctions définies ultérieurement écraseront les fonctions définies précédemment.

● Pendant le processus d'analyse, arrêtez de télécharger tous les éléments descendants de la page. Le fichier de feuille de style est spécial. Une fois téléchargé, il sera analysé avec toutes les feuilles de style précédemment téléchargées. Une fois l'analyse terminée, tous les éléments précédents (y compris ceux qui ont été rendus auparavant) seront restitués. Et continuez le rendu de cette manière jusqu'à ce que la page entière soit rendue.

● L'ordre dans lequel Firefox gère le téléchargement et le rendu est à peu près le même, à l'exception de quelques différences subtiles, comme le rendu des iframes.

Pour plus d'articles liés au mécanisme de priorité CSS, veuillez faire attention au site Web PHP chinois !