css中優(yōu)先級(jí)的衡量標(biāo)準(zhǔn)是什么

小編給大家分享一下css中優(yōu)先級(jí)的衡量標(biāo)準(zhǔn)是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

一、背景

CSS有三大特性：層疊性、繼承性、優(yōu)先級(jí)。

而我們?cè)诮oCSS定義樣式的時(shí)候，經(jīng)常出現(xiàn)兩個(gè)及以上的規(guī)則應(yīng)用在同一元素上，單該元素最終在瀏覽器呈現(xiàn)的效果是應(yīng)用的哪個(gè)規(guī)則呢？這就要考慮優(yōu)先級(jí)的問(wèn)題了。

CSS優(yōu)先級(jí)是由CSS權(quán)重來(lái)作為衡量標(biāo)準(zhǔn)的，權(quán)重的計(jì)算有一套計(jì)算公式，有如下規(guī)范：

使用一個(gè)4位數(shù)的字串來(lái)表示級(jí)別，從左到右，左邊的做大，往右依次遞減，且數(shù)位之間沒(méi)有進(jìn)制，級(jí)別之間不可逾越。沒(méi)有進(jìn)制的意思是:即使是10個(gè)標(biāo)簽的權(quán)重相加也不會(huì)大于類選擇器的權(quán)重，類推，十個(gè)類選擇器的權(quán)重也小于id選擇器的。

二、權(quán)重的計(jì)算實(shí)例

以一下代碼為例：

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

首先給li以下樣式：

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

標(biāo)簽選擇器的權(quán)重

選擇器p ul li是后代選擇器，三個(gè)標(biāo)簽的權(quán)重都是（0，0，0，1 ），因?yàn)槭峭患?jí)選擇器，權(quán)重可以相加，最后得到p ul li的權(quán)重就是（0，0，0，3）。

類選擇器的權(quán)重

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

權(quán)重：類、偽類選擇器>標(biāo)簽選擇器

id選擇器的權(quán)重

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

id選擇器>類、偽類選擇器>標(biāo)簽選擇器

行內(nèi)樣式

在以上樣式的基礎(chǔ)上給第4個(gè)li添加行內(nèi)樣式

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

效果如下：第4個(gè)li的背景色只呈現(xiàn)了行內(nèi)樣式的設(shè)置，其他的都被覆蓋了。

行內(nèi)樣式>id選擇器>類、偽類選擇器>標(biāo)簽選擇器

復(fù)合選擇器權(quán)重計(jì)算例如：

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

.nav ul li   ------>      0,0,1,2    (2個(gè)標(biāo)簽，1個(gè)類)

a:hover      -----—>      0,0,1,1     (1個(gè)標(biāo)簽，一個(gè)偽類)

.nav a       ------>      0,0,1,1   (1個(gè)標(biāo)簽，一個(gè)類)

#nav p       ----->       0,1,0,1   (1個(gè)id，一個(gè)標(biāo)簽)

三、總結(jié)優(yōu)先級(jí)

總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性

需要注意的特殊情況：

1. 繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，他的權(quán)重都為0，也就是說(shuō)子元素定義的樣式會(huì)覆蓋繼承來(lái)的樣式。

2. 行內(nèi)樣式優(yōu)先。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100?？傊?，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)。

3. 權(quán)重相同時(shí)，CSS遵循就近原則。也就是說(shuō)靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說(shuō)排在最后的樣式優(yōu)先級(jí)最大。

4. CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。也就是說(shuō)不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)。

看完了這篇文章，相信你對(duì)css中優(yōu)先級(jí)的衡量標(biāo)準(zhǔn)是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！