什么是 CSS Specificity？

CSS 特异性（Specificity）是计算 CSS 选择器优先级的标准机制，当不同选择器针对同一元素冲突时，浏览器用它来决定哪个样式生效。特型性（Specificity）通常以一个四位数值（如 a,b,c,d）来表示，其中左边的数字位优先级最高，且数值之间无进位机制（例如 0,0,0,5 加 0,0,0,5 是 0,0,0,10，而非 0,0,1,0）

• 特异性计算规则：
  • 元素选择器（如 div）：贡献值 0,0,0,1
  • 类选择器（如 .class）、伪类（如 :hover）：贡献值 0,0,1,0
  • ID 选择器（如 #id）：贡献值 0,1,0,0
  • 行内样式（如 <div style="...">）：贡献值 1,0,0,0
  • !important 声明：优先权无限高（优先于所有其他规则）
  • 通配符（*）或继承的样式：贡献值 0,0,0,0（优先级最低）

  上述贡献值会叠加计算，举例：选择器 div ul li 的特型性为 0,0,0,3（3 个元素）；.nav li 为 0,0,1,1（1 类 + 1 元素）；#header.nav 为 0,1,1,0（1 ID + 1 类）

• 优先级规则：
  比较特型性时按位置从高到低：如果 a 相同则比较 b，以此类推（a > b > c > d）
  • 所有规则中：!important > 行内样式 > ID > 类 / 伪类 / 属性选择器 > 元素 > 通配符 / 继承
  • 特型性相同时：遵循“就近原则”，后定义的规则胜出或覆盖前者

这个机制确保样式级联顺序的可预测性。