CSS选择器权重是浏览器用于决定样式优先级的四元组(a,b,c,d)：a为内联样式，b为ID数，c为类/属性/伪类数，d为标签/伪元素数，权重按位比较，越高者生效。
在CSS中，选择器的优先级决定了当多个规则作用于同一个元素时，哪一个规则会被应用。优先级是根据选择器的组成来计算的，这个过程也被称为“权重计算”。理解CSS选择器权重规则，能帮助开发者更准确地控制样式表现。
什么是CSS选择器权重？
每个CSS选择器都有一个对应的权重值，浏览器通过比较权重来决定哪条样式规则生效。权重越高，优先级越高。
权重不是相加的数字，而是按位比较的“四元组”，格式为：(a, b, c, d)
a：内联样式的权重（style属性），有则为1，否则为0 b：ID选择器的数量 c：类选择器、属性选择器和伪类的数量 d：标签选择器和伪元素的数量常见选择器权重示例
以下是不同类型选择器的权重计算方式：
立即学习“前端免费学习笔记（深入）”；
- (1,0,0,0) —— [style="..."] 内联样式
- (0,1,0,0) —— #header ID选择器
- (0,0,1,0) —— .nav 类选择器
- (0,0,1,0) —— [type="text"] 属性选择器
- (0,0,1,0) —— :hover 伪类
- (0,0,0,1) —— div 标签选择器
- (0,0,0,1) —— ::before 伪元素
- (0,0,0,0) —— * 通用选择器、继承样式
复合选择器的权重计算
当选择器由多个部分组成时，权重是各部分之和。
- #header .nav a → (0,1,1,1)
- div#main input[type="text"]:focus → (0,1,2,2)
- .btn:hover::after → (0,0,2,1)
注意：逗号分隔的选择器各自独立计算优先级。例如 .a, #b { color: red } 的优先级由 #b 决定。
!important 和继承的影响
!important 可以打破正常优先级规则，但应谨慎使用：
- 带有 !important 的声明优先级最高（除非遇到另一个同权重但更晚出现的 !important）
- 继承的样式优先级非常低，通常会被任何直接匹配的规则覆盖
- 通用选择器 * 和继承样式几乎不会影响优先级竞争
基本上就这些。掌握权重计算逻辑后，就能避免很多“为什么样式没生效”的问题。写样式时尽量避免依赖 !important，合理组织选择器结构，让CSS更可维护。
