CSS选择器优先级

CSS选择器优先级（Specificity）是决定当多个CSS规则应用于同一元素时，哪条规则最终生效的机制。理解优先级对于编写可预测、可维护的样式表至关重要。

介绍[编辑 | 编辑源代码]

当多个CSS规则针对同一元素声明冲突的属性时，浏览器会根据选择器的优先级决定应用哪个样式。优先级由选择器的类型和数量决定，通常表现为一个权重值。

优先级计算遵循以下核心原则：

更具体的选择器会覆盖更通用的选择器
内联样式（通过HTML的style属性）优先级最高
使用!important的规则会覆盖所有其他规则（但应谨慎使用）

优先级计算规则[编辑 | 编辑源代码]

优先级通过一个四部分的权重系统计算，格式为：(a, b, c, d)：

选择器类型	示例	权重值 (a,b,c,d)
内联样式	`style="color: red;"`	(1,0,0,0)
ID选择器	`#header`	(0,1,0,0)
类/属性/伪类选择器	`.button`, `[type="text"]`, `:hover`	(0,0,1,0)
元素/伪元素选择器	`div`, `::before`	(0,0,0,1)

注意：通用选择器(*)、组合器(>, +, ~)和否定伪类(:not())不影响优先级，但:not()内部的选择器会参与计算。

比较规则[编辑 | 编辑源代码]

从左到右逐级比较：

/* 示例1: (0,0,1,1) */
div.warning { color: orange; }

/* 示例2: (0,0,0,1) */
div { color: blue; }

示例1的优先级更高，因为它的(c)值更大。

代码示例[编辑 | 编辑源代码]

基本比较[编辑 | 编辑源代码]

<div id="content" class="article">
  <p class="intro">示例文本</p>
</div>

/* 规则1: (0,0,0,1) - 权重 1 */
p { color: black; }

/* 规则2: (0,0,1,1) - 权重 11 */
p.intro { color: blue; }

/* 规则3: (0,1,0,1) - 权重 101 */
#content p { color: red; }

最终文本会显示为红色，因为规则3的优先级最高。

!important 例外[编辑 | 编辑源代码]

p { color: red !important; }
#content p { color: green; }

即使ID选择器优先级更高，带有!important的声明仍会生效。

可视化优先级计算[编辑 | 编辑源代码]

实际应用案例[编辑 | 编辑源代码]

导航菜单样式覆盖[编辑 | 编辑源代码]

<nav id="main-nav" class="navigation">
  <ul>
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
  </ul>
</nav>

/* 基础样式 */
#main-nav a { color: #333; }          /* (0,1,0,1) */

/* 激活项样式 */
.active a { color: red; }             /* (0,0,1,1) */

/* 悬停效果 */
#main-nav a:hover { color: blue; }    /* (0,1,1,1) */

悬停时链接变蓝，因为:hover的优先级(0,1,1,1)高于其他规则。

优先级计算练习[编辑 | 编辑源代码]

计算以下选择器的优先级值：

body.home #header .logo:hover        /* (0,1,2,1) */
nav > ul li:first-child              /* (0,0,1,2) */
:not(#footer) .copyright             /* (0,1,1,0) */

最佳实践[编辑 | 编辑源代码]

避免过度使用ID选择器 - 会导致优先级过高难以覆盖
谨慎使用!important - 应作为最后手段
保持低优先级 - 使用类选择器而非ID选择器
使用CSS方法论（如BEM）帮助管理优先级

数学表示[编辑 | 编辑源代码]

优先级可以表示为四元组的值，比较规则为： $(a_{1}, b_{1}, c_{1}, d_{1}) > (a_{2}, b_{2}, c_{2}, d_{2})$ 当且仅当存在 $i \in {1, 2, 3, 4}$ 使得： $\forall j < i, a_{j} = b_{j} 且 a_{i} > b_{i}$

常见误区[编辑 | 编辑源代码]

认为更多的选择器总是优先级更高（实际上需要看具体类型）
忽略继承的样式影响
不理解:not()伪类的优先级计算方式
过度依赖!important导致样式难以维护

通过理解这些规则，开发者可以更有效地编写和维护CSS代码，避免意外的样式覆盖问题。