类选择器权重高于标签选择器，因css特异性（specificity）按四位向量(a,b,c,d)机械计分：类属c位权重为0,0,1,0，标签属d位为0,0,0,1，逐位比较时c位优先于d位，故.class > div。
类选择器为什么比标签选择器权重高
因为浏览器用 specificity（特异性）系统计算优先级，不是靠“谁更常用”或“谁写得更具体”，而是按结构拆解后机械计分：#header 算 100 分，.btn 算 10 分，button 算 1 分——类天然比标签多一个数量级。
具体怎么算出来的
每个选择器被拆成三段数字（ID 数｜类/属性/伪类数｜标签/伪元素数），比较时从左到右逐位比大小：
-
div→0-0-1 -
.container→0-1-0 -
div.container→0-1-1（类和标签叠加，不是相加）
所以 .container（0-1-0）> div（0-0-1），哪怕它没写标签名。
为什么设计成这样
这是为支持样式复用与模块化而做的权衡：
- 标签选择器（如
p、h2）太宽泛，容易误伤；强制低权重可避免全局样式失控 - 类选择器（如
.error、.is-active）是开发者主动标记的语义节点，理应拥有更高控制力 - ID 本该唯一，但早期滥用严重，所以给它 100 分来“镇住场面”，结果反而导致覆盖困难——这也是现在推荐少用 ID 做样式的根本原因
容易踩的坑
真正出问题的地方往往不在单个选择器，而在组合和继承：
- 写
ul li a（0-0-3）想覆盖.nav-link（0-1-0）？不行，后者胜出 - 以为
div#main p strong（1-0-3）一定赢过.highlight-text（0-1-0）？对，但它输给#main .highlight-text（1-1-0） - 用
!important强行提权？它不参与 specificity 计算，但会破坏后续所有覆盖逻辑，调试时根本看不出谁在起效
最常被忽略的是：后代选择器里的每一层标签都只加 1 分，堆再多也敌不过一个类——这不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
