css 6 選擇器宣告的優先順序

2022-03-20 21:02:31 字數 1257 閱讀 4975

選擇器的特殊性由選擇器本身的元件確定,特殊性值表述為4個部分,如 0,0,0,0

乙個選擇器的具體特殊性如下確定:

1.對於選擇器中給定的id屬性值,加 0,1,0,0

2.對於選擇器中給定的各個類屬性,屬性選擇,或偽類,加 0,0,1,0

3.對於選擇器中的給定的各個元素和偽元素,加0,0,0,1

4.萬用字元選擇器的特殊性為0,0,0,0

5.結合符對選擇器特殊性沒有一點貢獻

6.內聯宣告的特殊性都是1,0,0,0

7.繼承沒有特殊性

特殊性 1,0,0,0 大於所有以0開頭的特殊性

選擇器的特殊性最終都會授予給其對應的宣告

如果多個規則與同乙個元素匹配,而且有些宣告互相衝突時,特殊性越大的越佔優勢

注意:id選擇器和屬性選擇器

class="

pink

" id="

test

" style="

background: black;

">

view code

2     !important

有時某個宣告比較重要,超過了所有其他宣告,css2.1就稱之為重要宣告

並允許在這些宣告的結束分號之前插入 !important 來標誌

必須要準確的放置 !important ,否則宣告無效。 !important 總是要放在宣告的最後,即分號的前面

標誌為 !important的宣告並沒有特殊的特殊性值,不過要與非重要宣告分開考慮。

實際上所有的重要宣告會被瀏覽器分為一組,重要宣告的衝突會在其內部解決

非重要宣告也會被分為一組,非重要宣告的衝突也會在其內部解決

如果乙個重要宣告與非重要宣告衝突,勝出的總是重要宣告

class="

pink

" id="

test

" style="

color: black;

">

我是內部的div

view code

css樣式的**大致有三種

創作人員

讀者使用者**

權重:讀者的重要宣告

創作人員的重要宣告

創作人員的正常宣告

讀者的正常宣告

使用者**的宣告

class="

pink

" id="

test

" >我是div

view code

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

CSS 選擇器優先順序

css優先順序包含四個級別 文內選擇器,id選擇器,class選擇器,元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...

css選擇器優先順序

css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式,id選擇符,class類選擇符,元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵,然後繼承的權重很低,比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1,0,0,0,始終高於外...