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

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

CSS: h1 {color: red;}body h1 {color: green;}h2.grade {color: purple;}h2 {color: silver}然后是特別長(zhǎng)的一個(gè)選擇器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

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

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

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

這時(shí)候我們來(lái)計(jì)算上面的幾個(gè)的選擇器的權(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然后是特別長(zhǎng)的一個(gè)選擇器html > body table tr[id="totals"] td ul > li {color: marron} 0, 0, 1, 7li#answer {color: lightblue} 0, 1, 0, 1

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

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

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

總結(jié)

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

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