recherche

Maison  >  Article  >  interface Web  >  règle de priorité de style CSS

règle de priorité de style CSS

王林
王林avant
2021-01-30 10:31:184244parcourir

règle de priorité de style CSS

Introduction à la priorité des styles CSS :

Lorsque les styles externes, les styles internes et les styles en ligne sont appliqués au même élément en même temps, les priorités sont les suivantes :

(Style externe)Feuille de style externe

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

Un exemple est le suivant : 

<head>    
    <style type="text/css">    
      /* 内部样式 */    
      h3{color:green;}    
    </style>    
    <!-- 外部样式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 设置：h3{color:blue;} -->    
</head>    
<body>    
    <h3>测试！</h3>    
</body>

Priorité du sélecteur

règle de priorité de style CSS

Explication :

1. Le poids maximum est de 1000 ;

2. Le poids du sélecteur d'ID est de 100

3 Le poids du sélecteur de classe est de 10

4. le poids du sélecteur est 1

Utilisez le poids du sélecteur pour le calcul et la comparaison. L'exemple est le suivant : 

<html>    
  <head>    
    <style type="text/css">    
        #redP p {    
             /* 权值 = 100+1=101 */    
             color:#F00;  /* 红色 */    
        }    
        #redP .red em {    
             /* 权值 = 100+10+1=111 */    
             color:#00F; /* 蓝色 */    
        }    
        #redP p span em {    
             /* 权值 = 100+1+1+1=103 */    
             color:#FF0;/*黄色*/    
        }    
    </style>    
  </head>    
  <body>    
     <div id="redP">    
        <p class="red">red    
           <span><em>em red</em></span>    
        </p>    
        <p>red</p>    
     </div>    
  </body>    
</html>

Résultat : Les données de la balise bleu.

Règle de priorité CSS :

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

B Lorsque les poids sont égaux, la feuille de style qui apparaît plus tard Paramètres ; doit avoir priorité sur les paramètres de la feuille de style qui apparaissent en premier ;

C Les règles du créateur sont supérieures à celles du spectateur : c'est-à-dire que le style CSS défini par le rédacteur de la page Web a la priorité sur le style défini par le 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, les règles marquées de "!important" ont la priorité la plus élevée ; ; les exemples sont les suivants :

(Apprendre le partage vidéo : tutoriel vidéo CSS)

<html>    
  <head>    
    <style type="text/css">    
     #redP p{    
        /*两个color属性在同一组*/    
        color:#00f !important; /* 优先级最大 */    
        color:#f00;    
     }    
    </style>    
  </head>    
  <body>    
     <div id="redP">    
       <p>color</p>    
       <p>color</p>    
     </div>    
  </body>
</html>

Résultat : Affiché en bleu sous Firefox ;

Utiliser un script pour ajouter des styles

Lorsque le style externe est connecté et qu'un script JavaScript est utilisé pour insérer le style interne (c'est-à-dire que le style interne est créé à l'aide d'un script), l'IE Le navigateur montre son caractère unique. Le code est le suivant : 

<html>    
<head>    
  <title> demo </title>    
  <meta name="Author" content="xugang" />    
  <!-- 添加外部CSS 样式 -->    
  <link rel="stylesheet" href="styles.css" type="text/css" />    
  <!-- 在外部的styles.css文件中，代码如下：    
       h3 {color:blue;}    
  -->    
  <!-- 使用javascript 创建内部CSS 样式 -->    
  <script type="text/javascript">    
  <!--    
    (function(){    
        var agent = window.navigator.userAgent.toLowerCase();    
        var is_op = (agent.indexOf("opera") != -1);    
        var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;    
        var is_ch = (agent.indexOf("chrome") != -1);    
        var cssStr="h3 {color:green;}";    
        var s=document.createElement("style");    
        var head=document.getElementsByTagName("head").item(0);    
        var link=document.getElementsByTagName("link");    
        link=link.item(0);    
        if(is_ie)    
        {    
            if(link)    
                head.insertBefore(s,link);    
            else    
                head.appendChild(s);    
            document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;    
        }    
        else if(is_ch)    
        {    
            var t=document.createTextNode();    
            t.nodeValue=cssStr;    
            s.appendChild(t);    
            head.insertBefore(s,link);    
        }    
        else    
        {    
            s.innerHTML=cssStr;    
            head.insertBefore(s,link);    
        }    
    })();    
  //-->    
  </script>    
</head>    
<body>    
  <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3>    
</body>    
</html>

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

Ajouter

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 中，    
   虽然代码是将<style>插入在<link>之前，    
   但实际内存中，<style>却在<link>之后。    
   这也是“IE中奇怪的应用CSS的BUG”之所在！    
*/    
var oStyleSheet = document.styleSheets[0];    
//这实际是在<link>的外部样式中追加    
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 :

● IE télécharger L'ordre est de haut en bas ;

● L'exécution de la fonction JavaScript bloquera le téléchargement d'IE

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

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

● Lors du rendu sur une certaine partie de la page, toutes les parties situées au-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 certaine balise est intégrée dans un fichier et que le fichier est sémantiquement interprétable (par exemple : script JS, style CSS), alors le processus de téléchargement IE permettra Séparez Connectez-vous pour télécharger. Et il sera 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.

Recommandations associées :

Tutoriel CSS

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：style de souris CSSArticle suivant：style de souris CSS

Articles Liés

Voir plus