bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

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

前端雜談: CSS 權重 (Specificity)

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

站在用戶的角度思考問題,與客戶深入溝通,找到甘谷網站設計與甘谷網站推廣的解決方案,憑借多年的經驗,讓設計與互聯網技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都做網站、成都網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、域名與空間、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋甘谷地區(qū)。
  • 較長的 css selector 權重會大于較短的 css selector

  • id selector 權重高于 class selector.

但是 具體規(guī)范 是什么? 瀏覽器是按照什么標準來判定不同選擇器的權重的呢?

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

第一個關鍵詞:  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: 特異性  來表示一個 css selector 和其元素的相關性. 相關性越強, 即表示表示其權重最高.

那么問題來了,  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  的數目決定的.

第二個關鍵詞:  Selector Type

根據  W3 標準 中的規(guī)定, css selector 分為 4 種 type:  a, b, c, d . 他們的數目計算規(guī)則為:

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

  • b:  id 選擇器的數目

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

  • d:  標簽名(如:  p div ), 偽類 (如:  :before )的數目

在比較不同 css selector 的權重時, 按照  a => b => c => d  的順序進行比較.

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

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

還有一些 css 選擇器你沒提, 它們該怎么計算權重?

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

答案是這些選擇器并不會被計算到 css 的權重當中 :)

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

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

默認行為是: 當 specificity 一樣時, 最后聲明的 css selector 會生效.

如果我重復同樣的 css selectory type, 權重會增加嗎?

讓我們來做個實驗, 我們聲明一個 html 節(jié)點:

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

在 css 中我們添加兩個選擇器:

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

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

前端雜談: CSS 權重 (Specificity)

結果我們得到的是一個紅色的 div, 也就是說  .testClass.testClass  高于  .testClass . 所以結論是: 重復的 css selector, 其權重會被重復計算.

關于  !important :

按照  MDN 的說法,  !important  是不在 css 選擇器的權重計算范圍內的, 而它之所以能讓 css 選擇器生效是因為瀏覽器在遇見  !important  時會進行特殊的判斷. 當多個  !important  需要進行比較時, 才會計算其權重再進行比較.

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

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

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

  • 永遠不要  在你寫一個第三方插件時使用  !important

  • 永遠不要 在全站范圍使用  !important

一些誤導的信息

我在搜索關于 css 權重的資料時, 看到了下面這張圖, 看似十分有道理, 但其實是 錯誤的! 前端雜談: CSS 權重 (Specificity)

讓我們來做一個簡單的測試:

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

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

讓我們看看結果:

前端雜談: CSS 權重 (Specificity)

結果顯示還是  id 選擇器 權重更高.

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

本文標題:前端雜談:CSS權重(Specificity)-創(chuàng)新互聯
文章路徑:http://vcdvsql.cn/article42/gghec.html

成都網站建設公司_創(chuàng)新互聯,為您提供企業(yè)網站制作外貿建站網站策劃商城網站軟件開發(fā)虛擬主機

廣告

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

外貿網站建設