国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

SimonMa / 1897人閱讀

摘要：前端雜談權(quán)重權(quán)重想必大家都聽說過一些簡單的規(guī)則大部分人也都知道較長的權(quán)重會大于較短的權(quán)重高于但是具體規(guī)范是什么瀏覽器是按照什么標(biāo)準(zhǔn)來判定不同選擇器的權(quán)重的呢讓我們來看一下官方文檔是怎么說的第一個(gè)關(guān)鍵詞官方文檔中用特異性來表示一個(gè)和其元素的相

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

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

較長的 css selector 權(quán)重會大于較短的 css selector

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

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

讓我們來看一下官方文檔是怎么說的~

第一個(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: 特異性 來表示一個(gè) css selector 和其元素的相關(guān)性. 相關(guān)性越強(qiáng), 即表示表示其權(quán)重最高.

那么問題來了, 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)先級.

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

還有一些 css 選擇器你沒提, 它們該怎么計(jì)算權(quán)重?

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

答案是這些選擇器并不會被計(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 會生效.

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

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


  
test div

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

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

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

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

關(guān)于 !important:

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

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


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




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




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




永遠(yuǎn)不要在全站范圍使用 !important
一些誤導(dǎo)的信息

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

讓我們來做一個(gè)簡單的測試:

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

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

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

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

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

想了解更多 前端 和 數(shù)據(jù)可視化 ?

這里是我的 D3.js 、 數(shù)據(jù)可視化 的 github 地址, 歡迎 star & fork

D3-blog

如果覺得本文不錯(cuò)的話, 不妨點(diǎn)擊下面的鏈接關(guān)注一下 : )

github 主頁

知乎專欄

掘金

想直接聯(lián)系我 ?

郵箱: ssthouse@163.com

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114235.html

相關(guān)文章

  • 前端面試題：CSS中的選擇器權(quán)重

    摘要：第二等代表選擇器，如，權(quán)值為。第三等代表類，偽類和屬性選擇器，如，權(quán)值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式?jīng)]有權(quán)值。 CSS中選擇器優(yōu)先級的權(quán)重計(jì)算 先看一段代碼，如下： a{ color: red; } #box a{ color: green; } [class=box] a{ c...

    cppprimer 評論0 收藏0

  • pure.css框架源碼詳細(xì)解析

    摘要：文檔流指的是元素按照在中為的位置順序決定排布的過程，在排布過程中，將窗體自上而下分為一行行，并在每行中從左至右的順序排放元素。 一篇文章包你學(xué)會使用pure.css框架，理解其原理，并學(xué)會其包含css知識，學(xué)會自己寫css組件 前提知識 選擇器介紹 優(yōu)先級就是分配給指定css聲明的一個(gè)權(quán)重，它由匹配的選擇器中的每一種選擇器類型的數(shù)值決定。而當(dāng)優(yōu)先級與多個(gè)css聲明中任何一個(gè)聲明的優(yōu)先...

    sherlock221 評論0 收藏0

  • pure.css框架源碼詳細(xì)解析

    摘要：文檔流指的是元素按照在中為的位置順序決定排布的過程，在排布過程中，將窗體自上而下分為一行行，并在每行中從左至右的順序排放元素。 一篇文章包你學(xué)會使用pure.css框架，理解其原理，并學(xué)會其包含css知識，學(xué)會自己寫css組件 前提知識 選擇器介紹 優(yōu)先級就是分配給指定css聲明的一個(gè)權(quán)重，它由匹配的選擇器中的每一種選擇器類型的數(shù)值決定。而當(dāng)優(yōu)先級與多個(gè)css聲明中任何一個(gè)聲明的優(yōu)先...

    StonePanda 評論0 收藏0

  • CSS 特殊性詳解

    摘要：特殊性我們可以用很多種寫法來定位一個(gè)元素，而選擇器的特殊性值則是決定哪一個(gè)勝出的關(guān)鍵。選擇器的特殊性值其實(shí)很簡單，就是的形式。按照特殊性對應(yīng)用到給定元素的所有聲明排序。有較高特殊性的元素權(quán)重要大于有較低的特殊性的元素。 之前學(xué)CSS一直沒有深入的去研究CSS選擇器的優(yōu)先級，這次好好的看了下之后寫的時(shí)候特殊性值仿佛都浮現(xiàn)在眼前，現(xiàn)在寫的時(shí)候心里更加清晰，這里梳理一下學(xué)到的東西。 特殊性(...

    Lucky_Boy 評論0 收藏0

  • 你不知道的層疊樣式表

    摘要：層疊樣式表層疊規(guī)則你或許知道是層疊樣式表的縮寫。但你不一定真正的理解了其中層疊的含義。用戶自定義樣式雖然規(guī)范中有，但從起，開始不支持用戶自定義樣式表，而是建議使用擴(kuò)展來實(shí)現(xiàn)。網(wǎng)站提供的樣式表，則是我們所提供的的樣式。即不為的元素的計(jì)算值為。 層疊樣式表 層疊規(guī)則 你或許知道 CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫。但你不一定真正的理解了其中層疊的含...

    Bryan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<