CSS 選擇器權(quán)重
聲明：本文參考來源于MDN CSS 優(yōu)先級(jí)（80％）和B站尚硅谷的課程（20％）
我想你一定是來進(jìn)行速查的，所以我會(huì)盡量精簡文章內(nèi)容，保證不浪費(fèi)時(shí)間，不說廢話
文章包括新的:is和:where（實(shí)驗(yàn)性）的說明
優(yōu)先級(jí)：概念
優(yōu)先級(jí)就是分配給 CSS 聲明的一個(gè)權(quán)重，由 匹配的選擇器中的 每一種選擇器類型的 數(shù)值 決定。
多個(gè) CSS 優(yōu)先級(jí)相等的時(shí)候，最后的那個(gè)選擇器將會(huì)被應(yīng)用到元素上。
注意：文檔樹中元素的接近度對(duì)優(yōu)先級(jí)沒有影響。
速查：六點(diǎn)
- 格式：(1 | 0,a,b,c)
- 1 | 0: 是否有!important
- a: id的個(gè)數(shù)
- b: .class :matix [key]的個(gè)數(shù)
- c: el, ::el 的個(gè)數(shù)
- 沖突比較：從左到右，后來居上
- 簡記：
- !imp > 行內(nèi) > id > .class > el > 通配符 > 繼承
- 如果有!imp，那么即使是jsDOM也無法修改
- 提示：VSCode能自動(dòng)計(jì)算權(quán)重
- 注意：
-
:not和:is本身對(duì)優(yōu)先級(jí)沒有影響，但是，在 :not和is內(nèi)部聲明的選擇器會(huì)影響優(yōu)先級(jí) -
:where()和其中的選擇器的優(yōu)先級(jí)是 0
比較：后來者居上，a>b>c
- 從左到右：a->b->c，從左到右比較
/* A選擇器：(0,2,3) */
:is(h1) div:nth-child(2n):not(p:selected)
/* B選擇器：(0,2,1) */
h1 div.headtext[needcolor]
/*
1. 0=0
2. 2=2
3. 3>1
4. A選擇器勝出
*/
- 后來居上：前面寫的被后來覆蓋（前提：后者優(yōu)先級(jí)>=前者）
<link href="foo.css">
<link href="bar.css">
<TodoList /> <!-- green -->
/* foo.css */
TodoList {
color: red;
}
/* bar.css */
TodoList {
color: green;
}
- 無影響者：通配選擇符（
*）關(guān)系選擇符（+,>,~," ",||）和 否定偽類:not()對(duì)優(yōu)先級(jí)沒有影響
!important：核彈級(jí)聲明
當(dāng)在一個(gè)樣式聲明中使用它，此聲明將覆蓋任何其他聲明
無視：DOM樹
什么意思？直接上代碼！
body h1 {
color: green;
}
/* 后來居上 */
html h1 {
color: purple;
}
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
h1將被渲染成紫色。
其他：關(guān)于where選擇器
實(shí)驗(yàn)性: 這是一項(xiàng)實(shí)驗(yàn)性技術(shù)，在將其用于生產(chǎn)之前，請(qǐng)仔細(xì)檢查MDN瀏覽器兼容性表格。
給你康好了QAQ：
- Chrome 88+
- Firefox 78+
- Safari 14+
- IE ？？？ 早沒有了
工具：計(jì)算優(yōu)先級(jí)
如果你的編輯器沒有查看優(yōu)先級(jí)的功能文章來源：http://www.zghlxwxcb.cn/news/detail-637405.html
那么這是一個(gè)網(wǎng)站，供你計(jì)算優(yōu)先級(jí)：Specificity Calculator文章來源地址http://www.zghlxwxcb.cn/news/detail-637405.html
到了這里，關(guān)于CSS 選擇器優(yōu)先級(jí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
