css中優(yōu)先級的衡量標(biāo)準(zhǔn)有哪些

本篇內(nèi)容主要講解“css中優(yōu)先級的衡量標(biāo)準(zhǔn)有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css中優(yōu)先級的衡量標(biāo)準(zhǔn)有哪些”吧!

　　一、背景

　　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)重的計(jì)算有一套計(jì)算公式，有如下規(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 無窮大

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

　　以一下代碼為例：

　　<div>

　　<ul>

　　<li>1</li>

　　<liclass="red">2</li>

　　<liclass="red"id="blue">3</li>

　　<liclass="red"id="blue">4</li>

　　<li>5</li>

　　<li>6</li>

　　</ul>

　　</div>

　　首先給li以下樣式：

　　divulli{/*該選擇器的權(quán)重是0，0，0，3*/

　　width:200px;

　　height:30px;

　　border:1pxsolid#000;

　　background-color:pink;

　　}

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

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

到此，相信大家對“css中優(yōu)先級的衡量標(biāo)準(zhǔn)有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！