CSS優先順序計算規則

2021-10-09 11:41:37 字數 1027 閱讀 6623

css的優先順序可以分為引入優先順序宣告優先順序

css按照引入方式的不同可以分為:內聯樣式外部樣式內部樣式

內聯樣式:直接寫在html標籤內部的css樣式

外部樣式:使用link引入的外部css樣式

內部樣式:在style標籤內部書寫的css樣式

優先順序為:

內聯樣式 > 外部樣式 = 內部樣式

css的宣告優先順序根據宣告樣式的特殊性值判斷:

選擇器優先順序

內聯選擇器(行內樣式)

x, 0, 0, 0

id選擇器

0, x, 0, 0

class選擇器/屬性選擇器/偽類

0, 0, x, 0

元素選擇器

0, 0, 0, x

計算方法:

(1)每個等級的初始值為0

(2)每個等級的疊加為選擇器出現的次數相加

(3)不可進製,比如0,99,99,99

(4)依次表示為:0,0,0,0

(5)每個等級計數之間沒關聯

(6)等級判斷從左向右,如果某一位數值相同,則判斷下一位數值

(7)如果兩個優先順序相同,則最後出現的優先順序高,!important也適用

(8)萬用字元選擇器的特殊性值為:0,0,0,0

(9)繼承樣式優先順序最低,萬用字元樣式優先順序高於繼承樣式

(10)!important(權重),它沒有特殊性值,但它的優先順序是最高的,為了方便記憶,可以認為它的特殊性值為1,0,0,0,0。

計算示例:

#demo a

/*特殊性值:0,1,0,1*/

div #demo a

/*特殊性值:0,1,0,2*/

CSS優先順序的計算規則

css優先順序包含四個級別 標籤內選擇符,id選擇符,class選擇符,元素選擇符 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 元素標籤中定義的樣式 style屬性 加1,0,0,0 每個id選擇符 如 id 加0,1,0,0 每個class...

CSS優先順序計算的規則

最近在學習css優先順序計算的規則這個地方知識點挺多的,而且很重要,所以,今天新增一點小筆記。css的權重 一 css的引入方式 1.在節點元素上,使用style屬性 2.通過link引入外部檔案 3.通過style標籤在頁面內引入 三種引入方式的區別 index.html檔案 www.cppcns...

CSS 優先順序規則

優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。優先順序就是分配給指定的css宣告的乙個權重,它由匹配的選擇器中的每一種選擇器型別的數值決定。下列是乙份優先順序逐級增加的選擇器列表 當 important規則被應用在乙個樣式宣告中時,...