前端雜談:CSS權(quán)重(Specificity)-創(chuàng)新互聯(lián)

前端雜談: CSS 權(quán)重 (Specificity)

css 權(quán)重 想必大家都聽(tīng)說(shuō)過(guò), 一些簡(jiǎn)單的規(guī)則大部分人也都知道:

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到甘谷網(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)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋甘谷地區(qū)。

• 較長(zhǎng)的 css selector 權(quán)重會(huì)大于較短的 css selector

• id selector 權(quán)重高于 class selector.

但是 具體規(guī)范 是什么? 瀏覽器是按照什么標(biāo)準(zhǔn)來(lái)判定不同選擇器的權(quán)重的呢?

讓我們來(lái)看一下 官方文檔 是怎么說(shuō)的~

第一個(gè)關(guān)鍵詞:  Specificity

Specificity  is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of  CSS selectors

官方文檔中用  Specificity: 特異性  來(lái)表示一個(gè) css selector 和其元素的相關(guān)性. 相關(guān)性越強(qiáng), 即表示表示其權(quán)重最高.

那么問(wèn)題來(lái)了,  Specificity  是如何被比較的呢?

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each  selector type  in the matching selector.

Specificity 是由 selector 中 不同  selector type  的數(shù)目決定的.

第二個(gè)關(guān)鍵詞:  Selector Type

根據(jù)  W3 標(biāo)準(zhǔn) 中的規(guī)定, css selector 分為 4 種 type:  a, b, c, d . 他們的數(shù)目計(jì)算規(guī)則為:

• a:  如果 css 屬性聲明是寫在  style=“”  中的, 則數(shù)目為 1, 否則為 0

• b:  id 選擇器的數(shù)目

• c:  class 選擇器, 屬性選擇器(如  type=“text” ), 偽類選擇器(如:  ::hover ) 的數(shù)目

• d:  標(biāo)簽名(如:  p ,  div ), 偽類 (如:  :before )的數(shù)目

在比較不同 css selector 的權(quán)重時(shí), 按照  a => b => c => d  的順序進(jìn)行比較.

由第一個(gè) selector type a 的計(jì)算規(guī)則可知: 寫在 html 代碼 style 屬性中的 css 相較寫在 css 選擇器中的 css 屬性具有最高的優(yōu)先級(jí).

而 id selector (b) 相較 class selector (c) 有更高的優(yōu)先級(jí). 這也和我們平時(shí)的經(jīng)驗(yàn)相吻合.

還有一些 css 選擇器你沒(méi)提, 它們?cè)撛趺从?jì)算權(quán)重?

除了上面 Specificity 計(jì)算規(guī)則中的 css 選擇器類型, 還有一些選擇器如:  * ,  + ,  > , :not()  等. 這些選擇器該如何計(jì)算其權(quán)重呢?

答案是這些選擇器并不會(huì)被計(jì)算到 css 的權(quán)重當(dāng)中 :)

有一個(gè)需要特別注意一下的選擇器:  :not() , 雖然它本身是不計(jì)權(quán)重的, 但是寫在它里面的 css selector 是需要計(jì)算權(quán)重的.

如果  a,b,c,d  算完都一樣, 怎么辦?

默認(rèn)行為是: 當(dāng) specificity 一樣時(shí), 最后聲明的 css selector 會(huì)生效.

如果我重復(fù)同樣的 css selectory type, 權(quán)重會(huì)增加嗎?

讓我們來(lái)做個(gè)實(shí)驗(yàn), 我們聲明一個(gè) html 節(jié)點(diǎn):

<div>
  <div id="testId" class="testClass"><span>test div</span></div></div>

在 css 中我們添加兩個(gè)選擇器:

.testClass.testClass {  background-color: red;
}.testClass {  background-color: black;
}

如果重復(fù)的 css selector 會(huì)被忽略的話, 按照前面的規(guī)則, 最后聲明的 css selector 會(huì)生效, 所以 這個(gè) div 節(jié)點(diǎn)背景色應(yīng)該是黑色. 讓我們看看結(jié)果:

結(jié)果我們得到的是一個(gè)紅色的 div, 也就是說(shuō)  .testClass.testClass  高于  .testClass . 所以結(jié)論是: 重復(fù)的 css selector, 其權(quán)重會(huì)被重復(fù)計(jì)算.

關(guān)于  !important :

按照  MDN 的說(shuō)法,  !important  是不在 css 選擇器的權(quán)重計(jì)算范圍內(nèi)的, 而它之所以能讓 css 選擇器生效是因?yàn)闉g覽器在遇見(jiàn)  !important  時(shí)會(huì)進(jìn)行特殊的判斷. 當(dāng)多個(gè)  !important  需要進(jìn)行比較時(shí), 才會(huì)計(jì)算其權(quán)重再進(jìn)行比較.

通常來(lái)說(shuō), 不提倡使用  !important . 如果你認(rèn)為一定要使用, 不妨先自檢一下:

• 總是 先考慮使用權(quán)重更高的 css 選擇器, 而不是使用  !important

• 只有 當(dāng)你的目的是覆蓋來(lái)自第三方的 css(如: Bootstrap, normalize.css)時(shí), 才在頁(yè)面范圍使用  !important

• 永遠(yuǎn)不要  在你寫一個(gè)第三方插件時(shí)使用  !important

• 永遠(yuǎn)不要 在全站范圍使用  !important

一些誤導(dǎo)的信息

我在搜索關(guān)于 css 權(quán)重的資料時(shí), 看到了下面這張圖, 看似十分有道理, 但其實(shí)是 錯(cuò)誤的!

讓我們來(lái)做一個(gè)簡(jiǎn)單的測(cè)試:

按照?qǐng)D片中的計(jì)算公式: 如果一個(gè) css 選擇器包含 11 個(gè) class selector type , 另一個(gè)選擇器是 1 個(gè) id selector type . 那么 class 選擇器的權(quán)重會(huì)高于 id 選擇器的權(quán)重. 讓我們來(lái)試一試:

.testClass.testClass.testClass.testClass.testClass.testClass
  .testClass.testClass.testClass.testClass.testClass {  background-color: red;
}#testId {  background-color: black;
}

讓我們看看結(jié)果:

結(jié)果顯示還是  id 選擇器 權(quán)重更高.

雖然我們?cè)趯?shí)際編碼過(guò)程中很少會(huì)出現(xiàn) 10 多個(gè) class 的情況, 但萬(wàn)一出現(xiàn)了, 知道權(quán)重真正的 計(jì)算 和 比較 規(guī)則, 我們才能正確的處理~

本文標(biāo)題：前端雜談:CSS權(quán)重(Specificity)-創(chuàng)新互聯(lián)
文章路徑：http://bm7419.com/article42/gghec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、外貿(mào)建站、網(wǎng)站策劃、商城網(wǎng)站、軟件開(kāi)發(fā)、虛擬主機(jī)

廣告

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