CSS選擇器優先級 CSS權值

時間 2019-11-09

標籤 css 選擇器優先級權值欄目 CSS 简体版

原文原文鏈接

計算指定選擇器的優先級:從新認識CSS的權重javascript

通配選擇符的權值 0,0,0,0
標籤的權值爲 0,0,0,1
類的權值爲 0,0,1,0
屬性選擇的權值爲 ~~0,0,1,1~~ 0,0,1,0
僞類選擇的權值爲 0,0,1,0
僞對象選擇的權值爲 0,0,0,1
ID的權值爲 0,1,0,0
important的權值爲最高 1,0,0,0

使用的規則也很簡單，就是 選擇器的權值加到一塊兒，大的優先；若是權值相同，後定義的優先 。雖然很簡單，但若是書寫的時候沒有注意，很容易就會致使CSS的重複定義，代碼冗餘。css

從上面咱們能夠得出兩個關鍵的因素：html

權值的大小跟選擇器的類型和數量有關
樣式的優先級跟樣式的定義順序有關

總結：java

比較同一級別的個數，數量多的優先級高，若是相同即比較下一級別的個數 ，至於各級別的優先級，你們應該已經很清楚了，就是：node

important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > ~~繼承 > 通配符~~ 通配符 > 繼承css3

這也就解釋了爲何11個標籤的定義會比不上1個類的定義，1個類加11個標籤會比不上2個類的權重高。web

選擇器種類chrome

查閱資料概括下大概有以下幾種：瀏覽器

通配選擇器app
類型選擇器
ID選擇器
類選擇器
包含選擇器
子元素選擇器
相鄰兄弟選擇器
屬性選擇器

css1-css3提供很是豐富的選擇器，可是因爲某些選擇器被各個瀏覽器支持的狀況不同，因此不少選擇器在實際css開發中不多用到

關於CSS的執行效率：

樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其餘選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者由於不匹配而退出。
若是你很是在乎頁面的性能那千萬別使用CSS3選擇器。實際上，在全部瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面性能的改善更值得關注。

Google 資深web開發工程師Steve Souders對CSS選擇器的效率從高到低作了一個排序：

1.id選擇器（#myid）2.類選擇器（.myclassname）3.標籤選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul < li）6.後代選擇器（li a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.僞類選擇器（a:hover,li:nth-child）
上面九種選擇器中ID選擇器的效率是最高，而僞類選擇器的效率則是最低

選擇器的優先權

解釋：

1. 內聯樣式表的權值最高 1000；

2. ID 選擇器的權值爲 100

3. Class 類選擇器的權值爲 10

4. HTML 標籤選擇器的權值爲 1

用選擇器的權值進行計算比較，示例以下：

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

結果：<em> 標籤內的數據顯示爲藍色。（類選擇器的權值要遠遠大於標籤選擇器）

CSS 優先級法則：

A 選擇器都有一個權值，權值越大越優先；

B 當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；

C 創做者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；

D 繼承的CSS 樣式不如後來指定的CSS 樣式；

E 在同一組屬性設置中標有「!important」規則的優先級最大；示例以下：

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

結果：在Firefox 下顯示爲藍色；在IE 6 下顯示爲紅色；

使用腳本添加樣式

當在鏈接外部樣式後，再在其後面使用JavaScript 腳本插入內部樣式時（即內部樣式使用腳本建立），IE 瀏覽器就表現出它的另類了。代碼以下：

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

結果：在Firefox / Chrome / Safari / Opera 中，文字都是藍色的。而在IE 瀏覽器中，文字倒是綠色的。

附加

在IE 中添加樣式內容的JavaScript 代碼：

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;