CSS優先級的及其衡量標準CSS權重

ky0ncheng 發布于2019-04-23 13:28 / 2145人閱讀

摘要：優先級是由權重來作為衡量標準的，權重的計算有一套計算公式，有如下規范使用一個位數的字串來表示級別，從左到右，左邊的做大，往右依次遞減，且數位之間沒有進制，級別之間不可逾越。定義了一個命令，該命令被賦予最大的優先級。

一、背景

CSS有三大特性：層疊性、繼承性、優先級。

而我們在給CSS定義樣式的時候，經常出現兩個及以上的規則應用在同一元素上，單該元素最終在瀏覽器呈現的效果是應用的哪個規則呢？這就要考慮優先級的問題了。

CSS優先級是由CSS權重來作為衡量標準的，權重的計算有一套計算公式，有如下規范：

使用一個4位數的字串來表示級別，從左到右，左邊的做大，往右依次遞減，且數位之間沒有進制，級別之間不可逾越。沒有進制的意思是:即使是10個標簽的權重相加也不會大于類選擇器的權重，類推，十個類選擇器的權重也小于id選擇器的。

繼承或者 * 的貢獻值	0，0，0，0
每個元素（標簽）的貢獻值	0，0，0，1
每個類、偽類貢獻值	0，0，1，0
每個ID貢獻值	0，1，0，0，
每個行內式貢獻值	1，0，0，0
每個!important	無窮大

二、權重的計算實例

以一下代碼為例：

<div>
????<ul>
????????<li>1li>
????????<li?class="red">2li>
????????<li??class="red"?id="blue">3li>
????????<li??class="red"?id="blue">4li>
????????<li>5li>
????????<li>6li>
????ul>
div>

首先給li以下樣式：

div?ul?li{??/*該選擇器的權重是0，0，0，3*/
????width:?200px;
????height:?30px;
????border:1px?solid?#000;
????background-color:?pink;
????}

標簽選擇器的權重

選擇器div ul li是后代選擇器，三個標簽的權重都是（0，0，0，1 ），因為是同一級選擇器，權重可以相加，最后得到div ul li的權重就是（0，0，0，3）。

類選擇器的權重

在以上樣式的基礎上給.red添加樣式.red{background-color:red;}效果如下：

權重：類、偽類選擇器>標簽選擇器

id選擇器的權重

在以上樣式的基礎上給id名為blue的li添加樣式#blue{background-color:blue;}效果如下：

id選擇器>類、偽類選擇器>標簽選擇器

行內樣式

在以上樣式的基礎上給第4個li添加行內樣式

<li?class="red"?id="blue"?style="">4li>

效果如下：第4個li的背景色只呈現了行內樣式的設置，其他的都被覆蓋了。

行內樣式>id選擇器>類、偽類選擇器>標簽選擇器

復合選擇器權重計算例如：

div?ul??li???------>??????0,0,0,3

.nav?ul?li???------>??????0,0,1,2????(2個標簽，1個類)

a:hover??????-----—>??????0,0,1,1?????(1個標簽，一個偽類)

.nav?a???????------>??????0,0,1,1???(1個標簽，一個類)

#nav?p???????----->???????0,1,0,1???(1個id，一個標簽)

三、總結優先級

總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性

需要注意的特殊情況：

繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100。總之，他擁有比上面提高的選擇器都大的優先級。
權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。
CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

云服務器 GPU云服務器服務器性能的衡量標準 css的樣式網站的css css的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1916.html

CSS的三大特性

? 本文內容： ? 層疊性繼承性優先級權重計算方法（特異性） ? ? 首發日期：2018-05-01 層疊性：層疊性是指當一個標簽被設置了多個重復的樣式的時候，一個屬性會覆蓋另外一個屬性。比如：先給div設置背景顏色為紅色，然后設置背景顏色為粉紅色，那么最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設置不能并立，所以只為其一，這里沒給出確定答案是因為還要考慮優先級...

duan199226 2019-04-23 13:46 評論0 收藏0
css&html面試知識點

摘要：第二等代表選擇器，如，權值為。接收端收到后，回傳一個帶有標志的數據包以示傳達確認信息。第四次揮手主動關閉方收到后，發送一個給被動關閉方，確認序號為收到序號，至此，完成四次揮手。 CSS優先級算法參考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

Bamboy 2019-08-29 16:58 評論0 收藏0
css&html面試知識點

摘要：第二等代表選擇器，如，權值為。接收端收到后，回傳一個帶有標志的數據包以示傳達確認信息。第四次揮手主動關閉方收到后，發送一個給被動關閉方，確認序號為收到序號，至此，完成四次揮手。 CSS優先級算法參考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

JeOam 2019-08-02 11:42 評論0 收藏0
css樣式權重優先級，css樣式優先級

摘要：還有一篇是這樣排序的多重樣式間遵循繼承來的樣式瀏覽器缺省設置外部樣式表內部樣式表內聯樣式結合樣式繼承問題這個問題及其答案來看，繼承的優先級的確是最低的。原文：http://www.bkjia.com/Javascri... 樣式選擇器權重優先級： important > 內嵌樣式 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符 importa...

AJie 2019-08-30 12:55 評論0 收藏0