CSS優先順序的計算規則

2022-02-09 09:19:17 字數 813 閱讀 5376

css優先順序包含四個級別(標籤內選擇符,id選擇符,class選擇符,元素選擇符)以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。

css優先順序的計算規則如下:

* 元素標籤中定義的樣式(style屬性),加1,0,0,0

* 每個id選擇符(如 #id),加0,1,0,0

* 每個class選擇符(如 .class)、每個屬性選擇符(如 [attribute=])、每個偽類(如 :hover)加0,0,1,0

* 每個元素選擇符(如p)或偽元素選擇符(如 :firstchild)等,加0,0,0,1

然後,將這四個數字分別累加,就得到每個css定義的優先順序的值,

然後從左到右逐位比較大小,數字大的css樣式的優先順序就高。

例子:css檔案或中如下定義:

1. h1

/* 乙個元素選擇符,結果是0,0,0,1 */

2. body h1

/* 兩個元素選擇符,結果是 0,0,0,2 */

3. h2.grape

/* 乙個元素選擇符、乙個class選擇符,結果是 0,0,1,1*/

4. li#answer

/* 乙個元素選擇符,乙個id選擇符,結果是0,1,0,1 */

元素的style屬性中如下定義:

h1 /* 元素標籤中定義,乙個元素選擇符,結果是1,0,0,1*/

如此以來,h1元素的顏色是藍色。

注意:1、!important宣告的樣式優先順序最高,如果衝突再進行計算。

2、如果優先順序相同,則選擇最後出現的樣式。

3、繼承得到的樣式的優先順序最低

CSS優先順序計算規則

css的優先順序可以分為引入優先順序和宣告優先順序 css按照引入方式的不同可以分為 內聯樣式 外部樣式和內部樣式 內聯樣式 直接寫在html標籤內部的css樣式 外部樣式 使用link引入的外部css樣式 內部樣式 在style標籤內部書寫的css樣式 優先順序為 內聯樣式 外部樣式 內部樣式 c...

CSS優先順序計算的規則

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

CSS 優先順序規則

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