复合选择器权重按四维坐标（a,b,c,d）分位叠加，不进位不相加；id、类/伪类/属性选择器、元素/伪元素分别计入b、c、d位，符号无权重，@layer等层叠机制优先于权重计算。
复合选择器权重不是相加，而是分位叠加
很多人误以为 .nav ul li a 的权重是 4 × (0,0,0,1) = (0,0,0,4)，其实不对。浏览器不把选择器当“总分”算，而是按四维坐标逐位统计：每个选择器类型只贡献到对应位，且**不进位、不合并、不约简**。
比如 #header .nav a:hover：它含 1 个 ID（b=1）、2 个类/伪类（c=2：`.nav` 和 `:hover`）、2 个元素（d=2：`a` 和 `header` 隐含的上下文？不，注意——ID 和类本身不占 d 位，只有纯标签和伪元素才占 d）；所以最终是 (0,1,2,1)，因为 `a` 是一个元素选择器，`:hover` 是伪类（c 位），`.nav` 是类（c 位），`#header` 是 ID（b 位）。没有内联样式，a=0。
-
#header→ b += 1 -
.nav→ c += 1 -
a→ d += 1 -
:hover→ c += 1（伪类，归入 c 位）
结果就是 (0,1,2,1)。记住：:hover 不是元素，不算 d；::before 才算 d；[type="email"] 是属性选择器，算 c；div > p 中的 > 本身无权重，只保留左右两边的元素权重。
伪类、伪元素、属性选择器都算 c 位，但位置影响匹配逻辑
权重相同不代表效果一致。比如 a:visited 和 a[data-test] 都是 (0,0,1,1)，但浏览器对 :visited 有安全限制（不能读取状态以外的样式），而 [data-test] 可自由设置 color、display 等。再如 p::first-line 是 (0,0,0,2)：`p` 占 d=1，`::first-line` 是伪元素，也占 d=1 —— 它不进 c 位。
-
:hover、:focus、:nth-child(2)→ 全部计入 c 位 -
::before、::placeholder、::marker→ 全部计入 d 位 -
[disabled]、[data-id]、[type="submit"]→ 全部计入 c 位 -
input::placeholder→ (0,0,0,2)：input 是元素（d=1），::placeholder是伪元素（d=1）
后代选择器和子选择器权重计算完全一致
.container div p 和 .container > div > p 权重都是 (0,0,1,2)：1 个类（c=1），2 个元素（d=2）。符号 >、+、~ 本身不参与权重计算，只影响匹配范围。这点常被忽略，导致以为“加了 > 就更‘强’”，其实只是更精确，不是更高权。
- 写
ul > li > a不是为了提权，是为了避免匹配到ul li ul li a - 写
.btn:focus比button:focus权重高（(0,0,1,1) vs (0,0,0,2)），但前提是你要覆盖的是 button 默认焦点样式 - 如果同时存在
button:focus和.btn:focus，后者赢，不是因为它“更具体”，而是 c > d
真实冲突场景下，别只看数字，先看 a/b/c/d 四位是否真可比
遇到样式没生效，别急着算总数。先确认两条规则是否真的作用于同一个元素、是否被继承干扰、是否被 !important 截断。比如：
.card { color: red; }（(0,0,1,0)）article p { color: blue; }（(0,0,0,2)）
若 HTML 是 <article><p class="card">xxx</p></article>，则两条都匹配 p，此时 (0,0,1,0) > (0,0,0,2)，红字生效。
- 用 DevTools 的 Styles 面板直接看哪条被划掉、为什么被划掉（“specificity”列会显示四位数）
- Chrome 120+ 已支持在 computed 标签页里 hover 属性名，显示该值由哪个选择器提供及它的 specificity 值
- 不要手动加 ID 或 !important 来“强行提权”，优先重构选择器结构，比如把
div#main ul.nav li a拆成语义类.nav-link
真正容易被忽略的，是权重只在“同源层叠”中起作用——@layer 规则、style 标签顺序、import 顺序，都会在权重比较前就决定规则是否参与竞争。算对 (0,1,2,1) 没用，如果那条规则根本没进层叠上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
