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

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括瀍河網(wǎng)站建設(shè)、瀍河網(wǎng)站制作、瀍河網(wǎng)頁(yè)制作以及瀍河網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，瀍河網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到瀍河省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

一、背景

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ì)大于類(lèi)選擇器的權(quán)重，類(lèi)推，十個(gè)類(lèi)選擇器的權(quán)重也小于id選擇器的。

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

以一下代碼為例：

    

        
1
        
2
        
3
        
4
        
5
        
6
    

首先給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）。

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

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

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

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

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

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

行內(nèi)樣式

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

4

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

行內(nèi)樣式>id選擇器>類(lèi)、偽類(lèi)選擇器>標(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è)類(lèi))

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

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

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

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

總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類(lèi)選擇器 > 標(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?？傊麚碛斜壬厦嫣岣叩倪x擇器都大的優(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！