[05] css優先級

1.優先級計算規則(特殊性)

在css中，有不一樣的方式編寫css,若是想給同一個標籤設置樣式，選擇器的寫法有不少種，那麼當多個樣式都應用於同一個標籤，標籤優先選擇哪一個樣式呢？按照如下規則：

現有 0,0,0,0 四個位置

第一個0位置： 表示內聯樣式（標籤上的style屬性）1,0,0,0

第二個0位置： 表示id選擇器 0,1,0,0

第三個0位置： 表示類選擇器，屬性選擇器或僞類 0,0,1,0

第四個0位置： 表示標籤和僞元素 0,0,0,1

1.1實例

一個樣式的位置優先級最終由選擇器計算出來的總分最高的匹配，例以下面的實例：

// 0,0,0,1
h1 {
    color: red;
}
//0,0,0,2
p h1 {
    color: blue;
}
//0,0,1,0
.h1Class {
    font-size: 12px;
}
//0,0,1,0
*.h1Class {
    font-size: 20px;
}
//0,0,2,2
p.h1Class em.dark {
    color: maroon;
}
//0,1,0,0
#pId {
    color: yellow
}
// 0,1,1,1
div#h1Class *[href] {
    color: silver;
}
// 0.0.1.7 (這裏的id屬性選擇器只貢獻了0.0.1.0,和id選擇器不同)
html > body table tr[id='totals'] td url > li {
    color: maroon;
}

當多個選擇器樣式不衝突的時候，會合並樣式應用到標籤。

1.2 重要性

當某個樣式很是重要，可使用!important標記。大於上面計算方式的一切樣式.下面的樣式顏色爲藍色

<h1 style="color:red;">hello</h1>

//css
h1 {
    color: blue!important;
}

2.樣式層疊後的優先級

2.1 用戶代理三種css來源

咱們先弄清楚創做人員，讀者和用戶代理三種css來源。

創做人員（author's+style）：若是你是一個前端開發者，那麼你寫的那些樣式就叫作創做人員樣式。

用戶代理樣式（agent's+style），用戶代理也就是咱們一般所說的瀏覽器（IE、Firefox等等），這些瀏覽器會提供一些默認的樣式，好比IE瀏覽器中，一個純粹由html代碼構成的網頁裏，咱們會發現超連接會帶有一個藍色的前景色，這其實就用戶代理樣式，借用一些插件咱們能夠方便的查看這些默認樣式（好比Firefox中的Web+developer）
讀者樣式（reader's+style）：所謂讀者天然就是瀏覽網頁的用戶，有些時候這些用戶裏可能會有人不滿意網頁的配色，或者字體大小，這時候他們就是經過瀏覽器提供的接口爲網站添加讀者樣式。

2.2 層疊優先級判斷

1.找到應用於同一個元素的全部css規則

2.按照權重排序, 標誌!important最高,沒有!important的狀況，創做人員> 讀者樣式>用戶代理。下面是權重由高到低

   a.讀者的重要聲明(!important)

   b.創做者的重要聲明(!important)

   c.創做者的正常聲明

   d.讀者的正常聲明

   e.用戶代理聲明

3.當上面的計算方式結果同樣，按照特殊性（特殊性的優先計算規則）排序

<p id="bright">hello,world</p>

//權重排序：都是創做者，可是特殊性0,1,0,1
p#bright {
    color: silver;
}
//權重排序：都是創做者，可是特殊性0,0,0,1
p {
    color: black;
}

4.按出現順序，越在後面的，權重越大

//例1： 兩個規則的權重，來源和特殊性徹底相同，那麼誰在後面則勝出

//失敗
h1 {
    color: silver;
}
//勝出
h1 {
    color: blue;
}

 

// 例2： a連接的僞元素選擇器方式。權重，來源和特殊性都是同樣的。特殊性爲0,0,1,0,所以在點擊‘未訪問’的連接時，匹配:link,:hover,:active,而最後一個勝出

:link { color: blue;}
:visited { color: purple;}
:focus: { color: black;}
:hover { color: red;}
:active { color: orange}


//按照這種順序不會顯示:hover或：active的樣式。由於：link和：visited出如今後面。連接要麼是已訪問，要麼是未訪問，因此:link ：visted會覆蓋:hover的規則
:active { color: orange}
:focus: { color: black;}
:hover { color: red;}
:link { color: blue;}
:visited { color: purple;}