CSS css特殊性 優先順序 權重

2021-07-27 21:11:34 字數 1016 閱讀 2966

css選擇器可以用多種方式去選擇元素,實際上乙個元素可以由使用兩個或者多個規則來匹配,每個規則都有各自的選擇器。請看例子

css:

h1 

body h1

h2.grade

h2 然後是特別長的乙個選擇器

html > body table tr[id="totals"] td ul > li

li#answer

各自的效果:

這時候你可以根據樣式定義去檢視上面的效果這時候,就引出乙個話題,css特殊性(權重),大白話就是根據某一種規則,誰的優先順序高誰就能夠決定選中元素的樣式顯示。

但是這並不是解決衝突的全部,實際上所有樣式衝突的解決都有層疊來決定(後續)。

選擇器的特殊性是由選擇器本身的構成[css權威指南寫作元件]來確定,特殊值由四個組成部分,如 0,0,0,0,乙個選擇器的具體特殊性或者權重的計算 如下:

這時候我們來計算上面的幾個的選擇器的權重值

h1           0, 0, 0, 1

body h1 0, 0, 0, 2

h2.grade 0, 0, 1, 1

h2 0, 0, 0, 1

然後是特別長的乙個選擇器

html > body table tr[id="totals"] td ul > li 0, 0, 1, 7

li#answer 0, 1, 0, 1

你可能會奇怪,計算這個特殊性(權重)的時候為什麼 第乙個位置的值始終為0呢 ? 一般情況下,第乙個0是為內聯樣式宣告保留的,它比所有其他宣告的特殊性都高。但是請注意關鍵字!important,它的優先順序甚至 高於 內聯樣式

但是如果特殊性相等的兩個規則同時應用到乙個元素會怎麼樣。那麼後面的乙個有更高的優先順序。 

如果樣式表中有匯入的樣式表,一般認為出現在匯入樣式表中的宣告在前,主樣式表中的所有宣告在後面。

css優先順序之特殊性

在前端開發的時候,css構建樣式規則,這個時候我們會遇到乙個問題 當我們對同乙個元素做多個樣式規則,其中發生了衝突的時候,css是如何選擇最終呈現的樣式 如下 div div.main div main2 body div class main id main2 ssss div body 最終這個...

css 特殊性 權重排列

首先類似於二進位制的理解。0010大於0001。id 0,1,0,0 class,屬性值 偽類 0,0,1,0 元素 偽元素 0,0,0,1 偽元素 before after,first line,first letter 0,0,0,1 0,0,0,0 大於繼承值 important 就像 1,0...

CSS3特殊性 權重值

是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。下面是權值的規則 標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。例如下面的 下面,再來看一些例子吧?content div main content h2 三年級時,我還是乙個膽小如鼠的小女孩。最後...