css的樣式優先級

時間 2019-11-16

標籤 css 樣式優先級欄目 CSS 简体版

原文原文鏈接

前幾天作百度的筆試題，第一題就是關於css優先級的，雖然知道一些規則，但碰上把各條規則相互組合就懵逼了，因此仍是得來好好總結一下的。css

首要原則

就兩條：html

優先級高的樣式覆蓋優先級低的樣式css3
同一優先級的樣式，後定義的覆蓋先定義的，即後來居上瀏覽器

而至於樣式的優先級如何肯定，就是接下來要討論的問題：ide

多重樣式間的優先級

w3school給出的優先級順序從低到高是：wordpress

瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標籤內部）
內聯樣式（在 HTML 元素內部）url

但其實外部樣式表若放在內部樣式表後面實際上是會覆蓋內部樣式表的，舉個例子：spa

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多重樣式優先級</title>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: #000;
            }
        </style>
        <style type="text/css">
            @import url(higher.css);
        </style>
        <link rel="stylesheet" type="text/css" href="wider.css">
    </head>
    <body>
        <div id="box" style="background-color: #f00;"></div>
    </body>
    </html>

---highter.css
    #box {
        height: 200px;
    }

---wider.css
    #box {
        width: 200px;
    }

最終獲得的是一個寬高都爲200px的紅色元素，很明顯，內部樣式被放在後面的外部樣式覆蓋了。因此我更傾向於認爲外部樣式表和內部樣式表具備相同的優先級，結論以下：code

瀏覽器缺省設置 < 外部樣式表 = 內部樣式表 < 內聯樣式htm

同同樣式表內部的優先級

同同樣式表內，樣式的優先級主要是由選擇器的權重和權重的累加決定的。

首先，參考這篇文章可知選擇器的權重排序爲：

1.通用選擇器* 0-0-0
2.標籤選擇器，僞元素 0-0-1
3.類選擇器，屬性選擇器，僞類 0-1-0
4.ID 選擇器 1-0-0

而對於組合上面幾種狀況的選擇器式而言，就須要將全部出現的權重進行相加，取相加後的結果做爲權重，注意相加時：

不進位。由於每位權重間相差的數量級是很大的，在正常使用時不會出現低級選擇器靠數量的累加提高爲高級權重（雖然在某些狀況下確實會發生，好比256個class選擇器能夠幹掉1個id選擇器。。。）
無視+,>,~等組合選擇器的符號
not僞類不做爲僞類計算權重，而是直接計算其參數的權重。好比下面的代碼中not僞類的權重要高於類選擇器：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>not僞類的優先級</title>
        <style type="text/css">
            div:not(#box) {
                width: 100px;
                height: 100px;
                background-color: #0f0;
            }
            div.box {
                width: 100px;
                height: 100px;
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

除了選擇器，樣式自身還能夠繼承和提高優先級，規則以下：

從祖先元素繼承來的樣式優先級低於通用選擇器；甚至低於瀏覽器的缺省設置，好比最多見的，重置連接的默認樣式時必須寫在連接元素上，放在祖先元素中是沒有卵用滴
使用大殺器!important可將樣式提高到最高等級，無論這個樣式在哪一個樣式表或選擇器中；若是在同同樣式中出現了多個!important，就得看上面的權重規則進行pk了

是否是看起來有點暈，附上參考文章裏的大魚吃小魚的圖來輔助理解吧：

最終結論

結合上面的討論，咱們能夠得出元素的最終樣式是由什麼決定的：

多重樣式間遵循：繼承來的樣式 < 瀏覽器缺省設置 < 外部樣式表 = 內部樣式表 < 內聯樣式
而在同同樣式表中存在：通用選擇器* 0-0-0 < 標籤選擇器，僞元素 0-0-1 < 類選擇器，屬性選擇器，僞類 0-1-0 < ID 選擇器 1-0-0 << !important，其中對於組合選擇器還要用上面提到的方法進行權重累加後才能判斷
首要原則：高優先級覆蓋低優先級，同一優先級則後來居上

最後，要知道了解樣式的優先級，最重要的不是爲了用來酷炫和裝逼，而是能讓咱們寫出更簡潔高效的代碼，保證在寫代碼時就知道必定會出來什麼樣式，而不是等到堆上一堆選擇器後樣式還出不來時，再一臉懵逼地去排查。