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

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

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標(biāo)簽下的內(nèi)容

這是h2標(biāo)簽下的內(nèi)容

li的Content

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

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

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

這時候我們來計(jì)算上面的幾個的選擇器的權(quán)重值

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

你可能會奇怪，計(jì)算這個特殊性（權(quán)重）的時候?yàn)槭裁?第一個位置的值始終為0呢 ？?一般情況下，第一個0是為內(nèi)聯(lián)樣式聲明保留的，它比所有其他聲明的特殊性都高。但是請注意關(guān)鍵字!important，它的優(yōu)先級甚至 高于 內(nèi)聯(lián)樣式

但是如果特殊性相等的兩個規(guī)則同時應(yīng)用到一個元素會怎么樣。那么后面的一個有更高的優(yōu)先級。?
如果樣式表中有導(dǎo)入的樣式表，一般認(rèn)為出現(xiàn)在導(dǎo)入樣式表中的聲明在前，主樣式表中的所有聲明在后面。

轉(zhuǎn)載于:https://www.cnblogs.com/dongguapifly/p/10627113.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。