瀏覽器計算css優(yōu)先級一共有三個階段
優(yōu)先級計算的順序??
- CSS規(guī)則的重要性和來源
- CSS規(guī)則的特殊性
- CSS規(guī)則在文檔中出現(xiàn)的順序
1. 重要性和來源
我們先看來源
- user agent stylesheet 瀏覽器默認(rèn)樣式
- author stylesheet 開發(fā)人員定義的樣式
- user stylesheet 用戶在瀏覽器中定義的樣式
優(yōu)先級:
- user agent stylesheet
- user style sheets中的normal規(guī)則
- author style sheets中的normal規(guī)則
- author style sheets中的important規(guī)則
- user style sheets中的important規(guī)則
如果還沒有決出勝負(fù),進(jìn)入下一階段..
2. 按照特殊性
在這一階段
優(yōu)先級計算優(yōu)先級時會有4個標(biāo)識符 a, b, c, d
- 當(dāng)這個方法沒有使用選擇器而是直接寫到內(nèi)聯(lián)style中時, a = 1
- 當(dāng)使用id時, b += 1
- 當(dāng)使用其他屬性(class name) 和偽類時 c += 1
- 當(dāng)使用元素名和偽元素時, d += 1
a 到 d 優(yōu)先級依次降低, 栗子如下:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
3. CSS規(guī)則在文檔中出現(xiàn)的順序
還不能決定設(shè)優(yōu)先的話, 后出現(xiàn)的樣式規(guī)則會具有更高的優(yōu)先級 :- ), 厲害了我的瀏覽器.
W3C鏈接:
https://www.w3.org/TR/CSS21/cascade.html#specificity
在一個css-trick鏈接(英文):
https://css-tricks.com/specifics-on-css-specificity/
