No 140 css優先級別

2021-06-07 01:53:31 字數 1202 閱讀 5990

一、什麼是css優先順序?

所謂css優先順序,即是指css樣式在瀏覽器中被解析的先後順序。

二、css優先順序規則

既然樣式有優先順序,那麼就會有乙個規則來約定這個優先順序,而這個「規則」就是本次所需要講的重點。

樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:

統計選擇符中的id屬性個數。

統計選擇符中的class屬性個數。

統計選擇符中的html標記名個數。

最後,按正確的順序寫出三個數字,不要加空格或逗號,得到乙個三位數(css2.1是用4位數表示)。( 注意,你需要把數字轉換成乙個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。

例如:

每個id選擇符(#someid),加 0,1,0,0。

每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=value]等)、每個偽類(形如:hover等)加0,0,1,0。

每個元素或偽元素(:firstchild)等,加0,0,0,1。

其它選擇符包括全域性選擇符*,加0,0,0,0。相當於沒加,不過這也是一種specificity,後面會解釋。

三、特性分類的選擇符列表

以下是乙個按特性分類的選擇符的列表:

選擇符特性值

h1 1

p em 2

10p.bright 11

p.bright em.dark 22

#id316

100單從上面這個表來看,貌似不大好理解,下面再給出一張表:

選擇符特性值

h1 1

p em

1+1=2

10p.bright

1+10=11

p.bright em.dark

1+10+1+10=22

#id316

100

通過上面,就可以很簡單的看出,html標記的權重是1,class的權重是10,id的權重是100,繼承的權重為0(後面會講到)。

按這些規則將數字串逐位相加,就得到最終的權重,然後在比較取捨時按照從左到右的順序逐位比較。

優先順序問題其實就是乙個衝突解決的問題,當同乙個元素(內容)被css選擇符選中時,就要按照優先順序取捨不同的css規則,這其中涉及到的問題其實很多。

CSS樣式的優先級別

樣式不起作用時,多數是樣式優先順序或是樣式繼承的問題,在一遍文章看到很詳細的介紹,摘錄了下來和大家一起分享。樣式效果圖 優先原則一 文字從上到下,後出現的樣式優先於前面出現的同一樣式例 測試1結果 所有瀏覽器均yellow色,注意 與class 引號內的順序無關,只看.def1和.def2在宣告時的...

bug優先級別

bug缺陷的優先級別 首先需要對乙個版本進行冒煙測試,確定基本功能測試,如果不通過的話進行後期的測試已經無意義了,版本需要重新修改 第二,需要對產品的主要功能以及產品的業務基本邏輯,基本路徑進行測試,保證流程可以正常,才能進行下一步的測試,所以優先級別高 第三,流程正確了,則可以對每一項的小功能,例...

css 優先順序

當我們的css樣式中,如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出,也就是常講的css優先順序。一般情況下,你不必擔心css樣式衝突,但對於大型而且複雜的css樣式檔案,或有很多css檔案組成的,就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...