CSS选择器优先级由(内联, ID, 类/属性/伪类, 标签/伪元素)四维值决定，比较时逐位优先，如(0,1,0,0)>(0,0,10,0)，!important最高但慎用，后定义样式覆盖同优先级前者，建议少用高优先级、多用类选择器与BEM规范。
在CSS中，选择器的优先级决定了当多个规则作用于同一个元素时，哪个样式会被应用。理解优先级的计算方式对编写可维护的样式至关重要。
优先级的基本构成
优先级由四个层级组成，通常用一个四维数值表示：(a, b, c, d)，从左到右权重依次递减：
- a：内联样式的权重（如 style="..."），有则为1，否则为0
- b：ID选择器的数量（如 #header）
- c：类选择器（.class）、属性选择器（[type="text"]）和伪类（:hover、:nth-child）的数量
- d：标签选择器（div、p）和伪元素（::before、::after）的数量
例如：
- #main .nav li:hover → (0, 1, 2, 1)
- div#content p strong → (0, 1, 0, 3)
- .btn[type="submit"]::after → (0, 0, 2, 1)
比较优先级的规则
比较两个选择器的优先级时，从左到右逐位对比：
立即学习“前端免费学习笔记（深入）”；
- 先看 a 值，内联样式胜出
- a 相同则比较 b，ID 多者优先
- b 相同再比 c，类/属性/伪类多者优先
- c 相同最后看 d，标签和伪元素多者优先
注意：优先级不是数学加法，(0, 1, 0, 0) 高于 (0, 0, 10, 0)，即使后者总和更大。
特殊规则与例外
以下情况会影响最终样式应用：
- !important：声明后会覆盖其他所有普通规则，但应谨慎使用
- 继承样式：从父元素继承的样式优先级为 (0, 0, 0, 0)，通常最低
- 样式表顺序：优先级相同时，后定义的规则生效
实用建议
避免依赖复杂优先级，推荐做法：
- 少用 !important，改用更具体的选择器
- 合理组织CSS结构，减少嵌套层级
- 使用BEM等命名规范提升类的可读性和可控性
基本上就这些。掌握优先级计算逻辑，能有效减少样式冲突，让开发更高效。
