内联样式权重最高为1000，ID选择器为100，类/属性/伪类为10，元素/伪元素为1，按四位数比较大小；!important强制生效但慎用；同权重后定义的覆盖先定义的。
CSS选择器的优先级决定了当多个样式规则作用于同一个元素时，哪一个规则会被应用。理解优先级的关键在于掌握不同选择器的权重计算方式，以及它们在冲突时如何比较。
选择器权重的计算方式
每个选择器都有一个权重值，浏览器通过比较这些值来决定使用哪个样式。权重由四部分组成（从高到低）：
- 内联样式：写在HTML标签中的style属性，如style="color: red;"，权重为 1000
- ID选择器：如#header，每个ID增加 100
- 类、属性选择器和伪类：如.class、[type="text"]、:hover，每个加 10
- 元素选择器和伪元素：如div、::before，每个加 1
权重按“四位数”方式比较，比如 0,1,0,0 > 0,0,10,0，即使后者数值相加更大也不行。
常见选择器权重示例
- div → 权重 1
- .nav → 权重 10
- #main-nav → 权重 100
- div.nav#item → 权重 1 + 10 + 100 = 111
- style="color:red" → 权重 1000
即使一个类选择器写了10次，也比不上一个ID选择器的权重。
立即学习“前端免费学习笔记（深入）”；
!important 的特殊地位
在声明后面加上 !important 可以让该样式无视优先级规则，强制生效。但应谨慎使用，因为它会破坏样式的可维护性。
- 多个 !important 存在时，仍会比较选择器权重
- 内联样式 + !important 最终胜出
同权重下后来者居上
如果两个规则的权重完全相同，那么后定义的样式会覆盖前面的。这个特性常被用于小范围调整样式，无需修改原始CSS文件。
基本上就这些。优先级不复杂，但容易忽略细节，特别是组合选择器的累加方式。多练习几个例子就能掌握。
