CSS優(yōu)先級的兩種理解方式是什么-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)CSS優(yōu)先級的兩種理解方式是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到大峪網(wǎng)站設(shè)計(jì)與大峪網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋大峪地區(qū)。

方式一：值相加

我們先去MDN看看官方的解釋：

優(yōu)先級是如何計(jì)算的？

優(yōu)先級就是分配給指定的 CSS 聲明的一個(gè)權(quán)重，它由 匹配的選擇器中的 每一種選擇器類型的 數(shù)值 決定。

而當(dāng)優(yōu)先級與多個(gè) CSS 聲明中任意一個(gè)聲明的優(yōu)先級相等的時(shí)候，CSS 中最后的那個(gè)聲明將會(huì)被應(yīng)用到元素上。

當(dāng)同一個(gè)元素有多個(gè)聲明的時(shí)候，優(yōu)先級才會(huì)有意義。因?yàn)槊恳粋€(gè)直接作用于元素的 CSS 規(guī)則總是會(huì)接管/覆蓋（take

over）該元素從祖先元素繼承而來的規(guī)則。

我們從上面一段描述中得到個(gè)很重要的信息： 權(quán)重

我們再來看選擇器優(yōu)先級關(guān)系：ID選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器。

看來真相已經(jīng)呼之欲出了。

我們只要給不同類型的選擇器設(shè)定一個(gè)權(quán)重值，然后在根據(jù)選擇器的數(shù)量進(jìn)行相加，就很容易得出優(yōu)先級，例如：

ID選擇器的權(quán)重值設(shè)為 1000

類選擇器 、屬性選擇器 、偽類選擇器的權(quán)重值設(shè)為 100

標(biāo)簽選擇器、偽元素選擇器的權(quán)重值設(shè)為 10

我們可以很快速的計(jì)算出下面這段CSS的權(quán)重值并作出正確的判斷。

//權(quán)重值1110
#app .menu .item{}
//權(quán)重值210
.menu.menu .item{}
//權(quán)重值30
.item.item.item{}

可是。。。細(xì)心的你可能會(huì)發(fā)現(xiàn)只要低優(yōu)先級的選擇器數(shù)量足夠多（例如: .item...x200 {} ），那么低優(yōu)先級的權(quán)重值就可以超過高優(yōu)先級的權(quán)重值，但實(shí)際效果其實(shí)還是以高優(yōu)先級樣式為準(zhǔn)。當(dāng)出現(xiàn)這種情況時(shí)可能用現(xiàn)在的權(quán)重值計(jì)算方式就無法解釋了！

當(dāng)然可以通過限制選擇器的較大數(shù)量及拉大選擇器的權(quán)重值數(shù)值還是可以解釋的，但我總覺得這不是一種好的實(shí)現(xiàn)方式。

方式二：bit位存儲(chǔ)

我們假設(shè)權(quán)重值是用 unsigned int 變量存儲(chǔ)，那么該變量的 bit 位一共有32位（4字節(jié)），我們從高位按字節(jié)展開如下：

字節(jié)1：00000000

字節(jié)2：00000000

字節(jié)3：00000000

字節(jié)4：00000000

按字節(jié)和選擇器對應(yīng)：

字節(jié)1：00000000

字節(jié)2：00000000 ;ID選擇器

字節(jié)3：00000000 ;類選擇器 、屬性選擇器 、偽類選擇器

字節(jié)4：00000000 ;標(biāo)簽選擇器、偽元素選擇器

相同類型選擇器直接進(jìn)行個(gè)數(shù)相加，并填入到指定字節(jié)內(nèi)。

例1：

#app .menu .item{}

得到的權(quán)重值 bit 位如下：

結(jié)果為：65793

例2：

.menu.menu .item{}

得到的權(quán)重值 bit 位如下：

結(jié)果為：513

例3：

.item.item.item{}

得到的權(quán)重值 bit 位如下：

結(jié)果為：3

關(guān)于“CSS優(yōu)先級的兩種理解方式是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

當(dāng)前題目：CSS優(yōu)先級的兩種理解方式是什么-創(chuàng)新互聯(lián)
文章鏈接：http://www.muchs.cn/article20/dpjpco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、App設(shè)計(jì)、虛擬主機(jī)、電子商務(wù)、域名注冊、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)