資訊專欄INFORMATION COLUMN
摘要：優(yōu)先級是由權(quán)重來作為衡量標(biāo)準(zhǔn)的，權(quán)重的計算有一套計算公式，有如下規(guī)范使用一個位數(shù)的字串來表示級別，從左到右，左邊的做大，往右依次遞減，且數(shù)位之間沒有進(jìn)制，級別之間不可逾越。定義了一個命令，該命令被賦予最大的優(yōu)先級。
CSS有三大特性：層疊性、繼承性、優(yōu)先級。
而我們在給CSS定義樣式的時候，經(jīng)常出現(xiàn)兩個及以上的規(guī)則應(yīng)用在同一元素上，單該元素最終在瀏覽器呈現(xiàn)的效果是應(yīng)用的哪個規(guī)則呢？這就要考慮優(yōu)先級的問題了。
CSS優(yōu)先級是由CSS權(quán)重來作為衡量標(biāo)準(zhǔn)的，權(quán)重的計算有一套計算公式，有如下規(guī)范：
使用一個4位數(shù)的字串來表示級別，從左到右，左邊的做大，往右依次遞減，且數(shù)位之間沒有進(jìn)制，級別之間不可逾越。沒有進(jìn)制的意思是:即使是10個標(biāo)簽的權(quán)重相加也不會大于類選擇器的權(quán)重，類推，十個類選擇器的權(quán)重也小于id選擇器的。
| 繼承 或者 * 的貢獻(xiàn)值 | 0，0，0，0 |
|---|---|
| 每個元素（標(biāo)簽）的貢獻(xiàn)值 | 0，0，0，1 |
| 每個類、偽類貢獻(xiàn)值 | 0，0，1，0 |
| 每個ID貢獻(xiàn)值 | 0，1，0，0， |
| 每個行內(nèi)式貢獻(xiàn)值 | 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{??/*該選擇器的權(quán)重是0，0，0，3*/
????width:?200px;
????height:?30px;
????border:1px?solid?#000;
????background-color:?pink;
????}
選擇器div ul li是后代選擇器，三個標(biāo)簽的權(quán)重都是（0，0，0，1 ），因為是同一級選擇器，權(quán)重可以相加，最后得到div ul li的權(quán)重就是（0，0，0，3）。
在以上樣式的基礎(chǔ)上給.red添加樣式.red{background-color:red;}效果如下：
權(quán)重：類、偽類選擇器>標(biāo)簽選擇器
在以上樣式的基礎(chǔ)上給id名為blue的li添加樣式#blue{background-color:blue;}效果如下：
id選擇器>類、偽類選擇器>標(biāo)簽選擇器
在以上樣式的基礎(chǔ)上給第4個li添加行內(nèi)樣式
<li?class="red"?id="blue"?style="">4li>
效果如下：第4個li的背景色只呈現(xiàn)了行內(nèi)樣式的設(shè)置，其他的都被覆蓋了。
行內(nèi)樣式>id選擇器>類、偽類選擇器>標(biāo)簽選擇器
復(fù)合選擇器權(quán)重計算例如：
div?ul??li???------>??????0,0,0,3
.nav?ul?li???------>??????0,0,1,2????(2個標(biāo)簽，1個類)
a:hover??????-----—>??????0,0,1,1?????(1個標(biāo)簽，一個偽類)
.nav?a???????------>??????0,0,1,1???(1個標(biāo)簽，一個類)
#nav?p???????----->???????0,1,0,1???(1個id，一個標(biāo)簽)
總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
需要注意的特殊情況：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1916.html
? 本文內(nèi)容： ? 層疊性 繼承性 優(yōu)先級 權(quán)重計算方法（特異性） ? ? 首發(fā)日期：2018-05-01 層疊性： 層疊性是指當(dāng)一個標(biāo)簽被設(shè)置了多個重復(fù)的樣式的時候，一個屬性會覆蓋另外一個屬性。 比如：先給div設(shè)置背景顏色為紅色，然后設(shè)置背景顏色為粉紅色，那么最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設(shè)置不能并立，所以只為其一，這里沒給出確定答案是因為還要考慮優(yōu)先級...
摘要：第二等代表選擇器，如，權(quán)值為。接收端收到后，回傳一個帶有標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。第四次揮手主動關(guān)閉方收到后，發(fā)送一個給被動關(guān)閉方，確認(rèn)序號為收到序號，至此，完成四次揮手。 CSS優(yōu)先級算法 參考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...
摘要：第二等代表選擇器，如，權(quán)值為。接收端收到后，回傳一個帶有標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。第四次揮手主動關(guān)閉方收到后，發(fā)送一個給被動關(guān)閉方，確認(rèn)序號為收到序號，至此，完成四次揮手。 CSS優(yōu)先級算法 參考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...
摘要：還有一篇是這樣排序的多重樣式間遵循繼承來的樣式瀏覽器缺省設(shè)置外部樣式表內(nèi)部樣式表內(nèi)聯(lián)樣式結(jié)合樣式繼承問題這個問題及其答案來看，繼承的優(yōu)先級的確是最低的。 原文：http://www.bkjia.com/Javascri... 樣式選擇器權(quán)重優(yōu)先級： important > 內(nèi)嵌樣式 > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符 importa...
閱讀 713·2021-11-16 11:44
閱讀 3545·2019-08-26 12:13
閱讀 3240·2019-08-26 10:46
閱讀 2356·2019-08-23 12:37
閱讀 1186·2019-08-22 18:30
閱讀 2531·2019-08-22 17:30
閱讀 1840·2019-08-22 17:26
閱讀 2288·2019-08-22 16:20
