# CSS 選擇器權重 聲明：本文參考來源於[MDN CSS 優先順序](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)（80％）和B站尚矽谷的[課程](https://m.bilibili.com/video/BV1p84y ...
CSS 選擇器權重
聲明：本文參考來源於MDN CSS 優先順序（80％）和B站尚矽谷的課程（20％）
我想你一定是來進行速查的，所以我會儘量精簡文章內容，保證不浪費時間，不說廢話
文章包括新的:is和:where（實驗性）的說明
優先順序：概念
優先順序就是分配給 CSS 聲明的一個權重，由 匹配的選擇器中的 每一種選擇器類型的 數值 決定。
多個 CSS 優先順序相等的時候，最後的那個選擇器將會被應用到元素上。
速查：六點
- 格式：(1 | 0,a,b,c)
- 1 | 0: 是否有!important
- a: id的個數
- b: .class :matix [key]的個數
- c: el, ::el 的個數
- 衝突比較：從左到右，後來居上
- 簡記：
- !imp > 行內 > id > .class > el > 通配符 > 繼承
- 如果有!imp，那麼即使是jsDOM也無法修改
- 提示：VSCode能自動計算權重
- 註意：
:not和:is本身對優先順序沒有影響，但是，在 :not和is內部聲明的選擇器會影響優先順序:where()和其中的選擇器的優先順序是 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選擇器勝出
*/
- 後來居上：前面寫的被後來覆蓋（前提：後者優先順序>=前者）
<link href="foo.css">
<link href="bar.css">
<TodoList /> <!-- green -->
/* foo.css */
TodoList {
color: red;
}
/* bar.css */
TodoList {
color: green;
}
- 無影響者：通配選擇符（
*）關係選擇符（+,>,~," ",||）和 否定偽類:not()對優先順序沒有影響
!important：核彈級聲明
當在一個樣式聲明中使用它，此聲明將覆蓋任何其他聲明
無視：DOM樹
什麼意思？直接上代碼！
body h1 {
color: green;
}
/* 後來居上 */
html h1 {
color: purple;
}
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
h1將被渲染成紫色。
其他：關於where選擇器
實驗性: 這是一項實驗性技術，在將其用於生產之前，請仔細檢查MDN瀏覽器相容性表格。
給你康好了QAQ：
- Chrome 88+
- Firefox 78+
- Safari 14+
- IE ？？？ 早沒有了
工具：計算優先順序
如果你的編輯器沒有查看優先順序的功能
那麼這是一個網站，供你計算優先順序：Specificity Calculator
本文來自博客園，作者：DanicaStarrr，轉載請註明原文鏈接：https://www.cnblogs.com/hazjblog/p/css-specificity-rules.html
