深入讲解 CSS 选择器权重及实战

1. 权重计算规则详解

CSS 选择器的优先级由 三元组 (x, y, z) 决定，比较规则如下：

选择器类型	权重值 (x, y, z)	示例
ID 选择器	x + 1	#header → (1,0,0)
类/伪类/属性	y + 1	.active, :hover
元素/伪元素	z + 1	div, ::before

比较规则 ：从左到右逐级比较。例如 (1,0,0) > (0,10,10)（ID 优先级最高）。

2. 实战代码示例

示例 1：基础权重对比

<style>
  div { color: blue; }         /* (0,0,1) */
  .title { color: green; }     /* (0,1,0) */
  #title { color: red; }       /* (1,0,0) */
</style>

<div class="title" id="title">Hello World</div>

效果：文字为红色（ID 选择器权重最高）。

示例 2：复合选择器权重计算

<style>
  .container p { color: blue; }       /* (0,1,1) */
  div p.special { color: green; }     /* (0,1,2) */
  #main .content p { color: red; }    /* (1,1,1) */
</style>

<div id="main" class="container">
  <div class="content">
    <p class="special">Text</p>  <!-- 最终为红色 -->
  </div>
</div>

解析：

• #main .content p → (1,1,1)（最高优先级）

• div p.special → (0,1,2)

• .container p → (0,1,1)

示例 3：伪类和伪元素的权重

<style>
  a:hover { color: purple; }          /* (0,1,1) */
  .nav li::before { content: "★"; }   /* (0,1,2) */
  #menu li.active { color: orange; }  /* (1,1,1) */
</style>

<ul id="menu" class="nav">
  <li class="active">Item</li>  <!-- 文字为橙色，★ 仍显示 -->
</ul>

解析：

• #menu li.active 控制颜色（(1,1,1)）。

• .nav li::before 控制伪元素内容（独立作用）。

示例 4：!important 的核武器

<style>
  p { color: blue !important; }  /* 强制最高 */
  #para { color: red; }          /* (1,0,0) 无效 */
</style>

<p id="para">Important Text</p>  <!-- 蓝色 -->

注意 ：!important 会破坏权重规则，应尽量避免使用！

示例 5：属性选择器的权重

<style>
  input[type="text"] { border: 1px solid blue; }  /* (0,1,1) */
  .form-input { border: 2px dashed green; }       /* (0,1,0) */
</style>

<input type="text" class="form-input">  <!-- 蓝色实线边框 -->

解析 ：属性选择器 [type="text"] 的权重 (0,1,1) > 类选择器 (0,1,0)。

3. 权重的常见误区

1. 通配符 * 的权重 ：
   * { color: black; } 的权重是 (0,0,0)，低于所有其他选择器。

2. 继承的样式 ：

   继承的样式（如 font-family）不参与权重计算，优先级最低。

3. 源码顺序的作用 ：

   权重相同时，后定义的样式生效：

p { color: red; }
p { color: blue; }  /* 最终蓝色 */

4. 关键知识点

1. 优先级排序（从高到低）：

   • !important（强制最高，但避免滥用）

   • 行内样式 （如 <div style="color: red;">）

   • ID 选择器 （#id）

   • 类/伪类/属性选择器 （.class, :hover, [type="text"]）

   • 元素/伪元素选择器 （div, ::before）

2. 权重不进位 ：
   (1, 0, 0) 的优先级高于 (0, 100, 100)（ID 选择器权重最大）。

3. 相同权重时 ：

   后定义的样式会覆盖前面的（源码顺序决定）。