CSS選擇器的優先級詳解

時間 2019-11-07

原文原文鏈接

一.特指度(specificity)

咱們可使用不一樣的方式去選擇元素，而後使用你指定的樣式。那同一個元素有可能會被多個規則選擇，並且每一個規則的選擇符不盡相同。例以下面這樣:css

p{
    color: red;
}
body p{
    color:green;
}

<p>
    hello world!
</p>
複製代碼

上面的一對規則只能由一個勝出，由於文字的元素不可能即顯示紅色，又顯示綠色。那麼咱們如何知道哪一個規則的優先級更高呢? 答案是每一個選擇器的特指度不一樣，瀏覽器會計算每一個規則中的特指度，而後應用到規則中的每一個聲明。若是屬性聲明之間有衝突，那就應用特指度更高的那個樣式。(能夠將特指度理解爲優先級)html

選擇器的特指度由選擇器自己的組成部分決定。一個特指度由四部分組成，例如0，0，0，0。選擇器的特指度規則以下:瀏覽器

行內樣式的特指度爲1，0，0，0
每個ID選擇器加0，1，0，0
每個類選擇器、屬性選擇器、僞類加0，0，1，0
每個元素和僞元素加0，0，0，1
通用選擇器不增長特指度，也即通用選擇器的特指度爲0，0，0，0
繼承的值沒有特指度，即連0，0，0，0都沒有
若給一個元素的屬性值增長了!important聲明，則該聲明的樣式優先級最高

注意 :not()否認僞類的特指度在計算中不會被看做是僞類，可是在:not()內部聲明的選擇器是會影響特指度的，具體要看否認僞類裏面的選擇器是什麼類型了。 bash

例如：ide

p:not(.title) span{color:red;} 特指度爲0,0,1,2
p:not(h1) span{color:red;} 特指度爲0,0,0,3
複製代碼

再舉下面幾個例子，下面計算一下某一個選中元素的特指度ui

h1{color:red;}           特指度爲0，0，0，1   
h1.title{color:green;}   特指度爲0，0，1，1 
*.title{color:yellow;}   特指度爲0，0，1，0 
#side{color:silver;} 特指度爲0，1，0，0 
body #side{color:skyblue;} 特指度爲0，1，0，1 
h1 span{color:red;}      特指度爲0，0，0，2 
p.bright span.title{color:blue;}  特指度爲0，0，2，2 
*[href]{color:red;}      特指度爲0，0，1，0 
p::first-letter{color:red;} 特指度爲0，0，0，2 
p:first-child{color:green}  特指度爲0，0，1，1 
複製代碼

特指度計算出來了，那麼哪一個特指度更大呢?(也即誰的優先級較高) 特指度從左向右進行比較。特指度爲1，0，0，0比全部以0開頭的特指度大，無論後面的數有多大。一樣0，1，0，0比全部0，0，x，x要大，無論x取什麼值，依此類推。一樣0，1，1，0比0，1，0，0要大，若是兩個特指度的某一個位置上的數相同就比較後面一位數字，誰的數字大，那麼大的那個特指度就大，也即優先級更高。spa

特指度計算出來了，其值將賦予關聯的每一個聲明。 code

對上述那句話舉下面一個例子說明:
span{
    color: red;
    background-color: green;
}
span.title{
    color: violet;
}
<span class="title">are you ok?</span>
1.能夠計算出span{color: red;background-color: green;}的特指度爲0,0,0,1；這個特指度將賦予所關聯的每一個聲明，也就是說color:red和
background-color:green這兩個屬性值的特指度都爲0,0,0,1
2.而span.title{color:violet;}能夠計算出特指度爲0,0,1,1，也即color:violet的特指度爲0,0,1,1;這個顏色的優先級比前者高。故span元素的文本將顯示violet顏色。可是背景色還
是顯示爲green顏色。由於後者沒有聲明背景色，那就仍是使用以前聲明的背景顏色。
複製代碼

下面舉幾個例子來講明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css選擇器優先級</title>
    <style>
        h1{
            color: red;
        }
        body h1{
            color: green;
        }
        h2{
            color: red;
        }
        h2.title{
            color: green;
        }
        p{
            font-size: 16px;
            background-color: yellow;
        }
        p.news{
            font-size: 24px;
        }
    </style>
</head>
<body>
  <!--1.  h1{color:red}的特指度爲0，0，0，1；
  body h1{color:green}的特指度爲0,0,0,2;故後者的特指度更高h1元素中的文本顏色將會
  應用green顏色-->
  <h1>china</h1>
  
  <!--2. 能夠計算h2{color: red;}的特指度爲0，0，0，1; 
  h2.title{color: green;}的特指度爲0，0，1，1 後者勝出-->
  <h2 class="title">hello</h2>
  <!--3. p{font-size: 16px;background-color: yellow;} 這個元素所包含的全部屬性值的特指度都爲0,0,0,1
    p.news{font-size: 24px;}能夠知道font-size屬性的特指度爲0，0，1，1。
    故font-size的大小將應用後面那個樣式爲24px，背景色仍是爲黃色-->
  <p class="news">
        關於華爲鴻蒙系統，另據國外媒體Huawei Central報道，有知情人士透露，華爲的自
  </p>
</body>
</html>
複製代碼

在任何狀況下，瀏覽器都會肯定哪些規則與元素匹配，而後找出全部相關聯的聲明，計算每一個屬性的特指度，判斷哪些規則勝出，再把勝出的規則應用到元素上，獲得裝飾後的結果。cdn

通用選擇器的特指度htm

通用選擇器不增長特指度。即它的特指度爲0，0，0，0。並非說沒有特指度，繼承纔沒有特指度(參見後面)。例如對於下列規則p元素的文本顏色將爲red:

p{color:red;}  特指度爲0，0，0，1
*{color:green;} 特指度爲0，0，0，0
複製代碼

ID選擇器和屬性選擇器的特指度

ID選擇器和屬性爲id的選擇器的特指度是不一樣的，不要混淆。例如對於下列規則id爲title的元素的文本顏色將爲green:

#title{color:green;} 特指度爲0,1,0,0
[id="title"]{color:red;} 特指度爲0,0,1,0
複製代碼

行內樣式的特指度

行內樣式的特指度比其餘聲明都要高(除了!important)。例如對於下列規則的p元素的文本顏色將爲violet:

p{color:red;}
<p style="color: violet">你好</p>
複製代碼

!important

有時候某一個聲明很重要，超過其它聲明，你可使用!important。這種聲明須要在聲明末尾的分號以前插入!important,例以下面這樣:

p{color: red !important;font-size:20px;}
複製代碼

帶有!important的聲明對特指度沒有影響。可是會與不重要的聲明分開處理。全部帶!important的聲明放在一塊兒處理，不帶!important的聲明會放在一塊兒處理，其中的衝突使用特指度解決。

二.繼承

繼承是指某些樣式不只應用到所指定的元素，還會應用到元素的後代身上。例如給ul列表元素設置color:red;樣式那麼其子元素li的文本也會變成紅色。

ul{color:red;}

<ul>
    <li>hello</li>
    <li>china</li>
</ul>
複製代碼

使用谷歌瀏覽器能夠看到li的樣式繼承自它的父元素ul

也有不少屬性是不繼承的例如border、margin、padding等。

繼承的值沒有特指度，連零都沒有(也即特指度爲0,0,0,0的元素)。這一點須要特別注意。

看下面例子：

* {color:red;}
p.title{color:green;}

<p class="title">
    Welcome to china
    <span>haha</span>
</p>
複製代碼

能夠看到Welcome to china變成了綠色，原本span也會變成綠色，由於span元素會繼承父元素的值，可是如今確實紅色。緣由是上面通配選擇器的特指度爲0，0，0，0，而繼承的特指度沒有，故通配選擇器的優先級更高，故span元素裏面的內容也顯示成紅色了。

三.層疊

若是兩個特指度相等的規則應用到同一個元素上面，那麼瀏覽器如何解決這個衝突呢？例如這樣：

p{color:red;}
p{color:green;}
複製代碼

CSS採用層疊機制將樣式組合在一塊兒，即結合繼承和特指度的一些規則。CSS層疊規則以下:

1.找到匹配特定元素的全部規則
2.按照顯示權重排序應用到特定元素上的全部聲明。以!important標記的規則比沒有這一標記的規則權重高。
3.按照特指度排序應用到特定元素上的全部聲明。特指度越高權重越高。
4.按照聲明的先後位置排序應用到特定元素上的全部聲明。樣式表或文檔中靠後的聲明權重較高。導入的樣式表中的聲明放在當前樣式表中全部聲明的前面。

下面開始舉例說明:

按照權重排序

p{coloe:red !important;}
<p style="color: violet">你好</p>
複製代碼

因爲!important標記的規則權重較高，故p元素的文本內容顯示紅色。

按照特指度排序

p.title{coloe:red;}
p{color:green;}
<p class="title">你好</p>
複製代碼

那麼以上就是特指度越高，就應用高的那個聲明的樣式，故上述p元素的文本內容顯示紅色。

按照先後位置進行排序 若是兩個規則的權重和特指度都同樣，那麼按照樣式表中位置越靠後的規則完勝。

h1{color:red;}
h1{color:green;}
<h1>誰勝出</h1>
複製代碼

上述h1元素將應用第二條規則，也即h1元素的color將取green。

四.總結

層疊規則要按照顯示權重、特指度、以及先後位置順序進行判斷。先比較權重，權重越高的規則勝出(如應用了!important),再看特指度，特指度越高的勝出，最後在權重和特指度相同的狀況下看先後位置順序，靠後的勝出。記住這一條規則，就不會出錯了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。