關於css優先級的理解

時間 2019-12-06

標籤關於 css 優先級理解欄目 CSS 简体版

原文原文鏈接

在HTML中，加入CSS樣式表的方式通常有3種：1.經過link連接CSS外部樣式表（稱之爲外部樣式表）；2.是在HTML的<head>段中用<style>元素將樣式包含在頁面內部的樣式設置中（嵌入式樣式表）；3.是直接在頁面中加入一個style屬性（內聯樣式表）。 css

那麼瀏覽器是如何加載CSS層疊樣式表的呢？瀏覽器先是加載HTML語言，並構建HTML文檔樹，若是有內聯樣式表，那麼它會先加載他，其後如果還有嵌入樣式表，那麼他在內聯樣式表以後再加載，最後若是還有外部樣式表那麼他最後加載到網頁中。因此是內聯樣式表的優先級>嵌入式樣式表>外部樣式表。 css3

那麼對於CSS樣式表中選擇器的優先級是：ID選擇器>類選擇器>元素選擇器>僞元素選擇器。雖然ID選擇器的優先級最高，但通常並不會用到它，多用到的是類選擇器與元素選擇器。算法

對於下面一樓提出的關於選擇器特殊性。這裏特殊性是一個一個選擇器的數字表示。
基本的：瀏覽器

在級聯計算中指定一個CSS規則的權重時，會首先根據重要性（是否有!importance）和CSS來源對規則進行排序。重要性和來源相同的規則，就按特殊性排列：特殊性高的選擇器會覆蓋特殊性低的選擇器。最後，如果兩個選擇器具備一樣的來源、重要性和特殊性，寫在樣式表後面的那個規則就會覆蓋寫在前面的規則。這也適用於單一的屬性，所以，若是在同一個規則中屢次聲明瞭相同的屬性，最後的聲明就會覆蓋前面的聲明。
由於使用@import聲明導入的樣式表必需要寫在其餘規則以前，若是在CSS文件後面出現的非導入規則，與導入文件中的規則具備一樣的權重，導入規則將被覆蓋（由於選擇器的順序，後面的覆蓋前面的）。
根據W3C規範（http://www.w3.org/TR/css3-selectors/#specificity），特殊性的計算使用四個字母」a、b、c、d」來表明重要性依次遞減，其中：工具

a 若是該聲明是在style屬性中定義的，則爲1，不然爲0； spa

b 等於id選擇器的數目；排序

c 等於屬性選擇器、class和僞class的數量； ci

d 等於元素名和僞元素的數目。文檔

非CSS語法的標記（如font屬性），特殊性都歸爲0。基於這一系列規則，如下選擇器的特殊性爲 1,0,0,0 （a=1，b=0，c=0，d=0）：
<section style="padding-bottom: 10px;">
由於這裏是內聯CSS，a=1，其他數字是0。記住，假如在非內聯的連接樣式表中，有一處帶10個id選擇器（特殊性爲0,10,0,0）的規則，它的優先級仍然不如以上選擇器——特殊性的計算不是基於十進制升位的，後面的數再高也不能升到前一位：a=1的規則將始終優先於其餘a=0的規則。
如下選擇器更復雜一些，特殊性爲0,0,1,3（a=0，b=0，c=1，d=3）： get

article section h1.title { ... } 由於不是內聯的，a=0；由於沒有id，b=0；由於有一個class選擇器，c=1；由於有三個元素選擇器 d=3。基於這一系列算法來對特殊性進行計算，可能使人望而生畏。但實際上，有了一些經驗後，很容易看出一個選擇器比起另外一個選擇器特殊性是高仍是低，若有一個或兩個id選擇器，或其餘相似的明顯提示。編寫CSS時應該當心，若是沒有必要，不要建立高特殊性的選擇器。若是遇到棘手的狀況，相似Firebug或Safari Web Inspector等工具將幫助你瞭解特殊性如何應用於元素，它們能按照特殊性排序來顯示規則，將特殊性更高的規則顯示在最上面，並將被特殊性更高的規則覆蓋的屬性用刪除線劃掉。有關內容詳見第10章。然而應該記住兩件重要的事情：內聯CSS要比嵌入或連接CSS優先級更高；一個ID選擇器要比任意數量的class、屬性或元素選擇器優先級更高。

相關標籤/搜索

每日一句

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