注：文章來源：《css權威指南》 第三章。 部分未予記錄

css選擇器可以用多種方式去選擇元素，實際上一個元素可以由使用兩個或者多個規則來匹配，每個規則都有各自的選擇器。請看例子

CSS: h1 {color: red;}body h1 {color: green;}h2.grade {color: purple;}h2 {color: silver}然后是特別長的一個選擇器html > body table tr[id="totals"] td ul > li {color: marron}li#answer {color: lightblue}各自的效果：

這是h1標簽下的內容

這是h2標簽下的內容

li的Content

這時候你可以根據樣式定義去查看上面的效果?這時候，就引出一個話題，css特殊性(權重)，大白話就是根據某一種規則，誰的優先級高誰就能夠決定選中元素的樣式顯示。
但是這并不是解決沖突的全部，實際上所有樣式沖突的解決都有層疊來決定（后續）。

選擇器的特殊性是由選擇器本身的構成[css權威指南寫作組件]來確定，特殊值由四個組成部分，如 0，0，0，0，一個選擇器的具體特殊性或者權重的計算 如下：

• 對于選擇器中給定的各個ID屬性值，加 0, 1, 0, 0?
  -----什么意思 就比如說上面的例子:?li#answer 就符合規則， li[id="answer"] 不符合規則
• 對于選擇其中給定的各個?類屬性值，屬性選擇 或者 偽類, 加 0, 0, 1, 0
  -----還是拿上面的例子：?tr[id="totals"] 符合了屬性選擇 這一項 ; 類屬性值長這樣 selector.className ; 偽類自行腦補
• 對于選擇器中給定的?各個元素 和 偽元素, 加 0，0，0，1?
  -----依舊使用上面的例子:?html > body table tr[id="totals"] td ul > li {color: marron} 一共7個元素，并且沒有偽元素，所以符合規則，加 0, 0, 0, 7
• 最后一點：結合符和通配選擇器 對特殊性沒有任何效果。?
  -----?+ > 以及* 對特殊性沒有作用

這時候我們來計算上面的幾個的選擇器的權重值

h1 {color: red;} 0, 0, 0, 1body h1 {color: green;} 0, 0, 0, 2h2.grade {color: purple;} 0, 0, 1, 1 h2 {color: silver} 0, 0, 0, 1然后是特別長的一個選擇器html > body table tr[id="totals"] td ul > li {color: marron} 0, 0, 1, 7li#answer {color: lightblue} 0, 1, 0, 1

你可能會奇怪，計算這個特殊性（權重）的時候為什么 第一個位置的值始終為0呢 ？?一般情況下，第一個0是為內聯樣式聲明保留的，它比所有其他聲明的特殊性都高。但是請注意關鍵字!important，它的優先級甚至 高于 內聯樣式

但是如果特殊性相等的兩個規則同時應用到一個元素會怎么樣。那么后面的一個有更高的優先級。?
如果樣式表中有導入的樣式表，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有聲明在后面。

轉載于:https://www.cnblogs.com/dongguapifly/p/10627113.html

總結

以上是生活随笔為你收集整理的【CSS】css特殊性-优先级-权重的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。