如何查看CSS规则的优先级？

CSS 规则的优先级决定了多个样式规则作用于同一元素时，哪条规则最终会生效。理解并查看优先级是解决样式冲突的关键，以下是具体方法和规则：

一、CSS 优先级的计算规则

优先级由选择器的“权重值”决定，权重值高的规则优先生效。权重值通过以下维度计算（从高到低）：

1. 重要性（!important）
   标记为 !important 的样式优先级最高（会覆盖内联样式以外的所有规则）。
   例：color: red !important;
   ⚠️ 注意：滥用 !important 会导致维护困难，尽量通过优化选择器解决冲突。

2. 内联样式（style 属性）
   直接写在 HTML 标签的 style 属性中的样式（如 <div style="color: blue;">），优先级高于所有外部/内部 CSS 规则（除 !important）。

3. 选择器权重
   选择器的权重通过“四元组” (a, b, c, d) 表示，权重值从左到右依次比较，左侧数值大的优先级更高：

   • a：是否包含内联样式（1 或 0，内联样式专属）。
   • b：ID 选择器的数量（每个 ID 加 1）。
   • c：类选择器、伪类（如 :hover）、属性选择器（如 [type="text"]）的数量（每个加 1）。
   • d：元素选择器（如 div）、伪元素（如 ::before）的数量（每个加 1）。

   👉 示例：

   • #header .nav li → (0, 1, 1, 1)（1 个 ID，1 个类，1 个元素）
   • .container p:hover → (0, 0, 2, 1)（2 个类/伪类，1 个元素）
   • div → (0, 0, 0, 1)

二、如何查看优先级（用浏览器开发者工具）

浏览器开发者工具会直观显示样式的优先级，是最常用的方法：

1. 打开 Elements 面板
   按 F12 打开开发者工具，切换到「Elements」（Chrome）或「Inspector」（Firefox）面板，选中需要检查的元素。

2. 在 Styles 面板中观察样式状态
   右侧「Styles」面板会按优先级从高到低显示作用于该元素的所有 CSS 规则：

   • 优先级高的规则排在上面：越靠上的规则，权重越高。
   • 被划掉的样式：表示该样式被更高优先级的规则覆盖（或存在语法错误）。
   • 灰色样式：表示是继承自父元素的样式（优先级最低，可被任何直接作用于元素的样式覆盖）。

   👉 示例：
   若 .box 类选择器的样式被 #content .box 选择器覆盖，在 Styles 面板中，#content .box 的规则会排在 .box 上方，且 .box 中冲突的属性会被划掉。

3. 查看具体选择器的权重（进阶）
   在 Firefox 开发者工具中，可右键点击样式规则，选择「显示规则优先级」，直接看到该选择器的权重值（如 (0,1,0,0)），更直观。

三、优先级的特殊情况

1. 相同权重时，“后来者居上”
   若两个规则的权重完全相同，后定义的规则会覆盖先定义的规则（取决于 CSS 代码中的顺序）。
   例：

   .box {
         color: red; }   /* 先定义 */
   .box {
         color: blue; }  /* 后定义，最终生效 */
   

2. 通配符（*）、子选择器（>）、相邻选择器（+）不影响权重
   这些符号仅用于定位元素，不增加权重值。
   例：div > .item 与 .item 的权重相同（(0,0,1,1) vs (0,0,1,0) → 前者更高，因为多了元素选择器 div）。

3. 继承的样式优先级最低
   父元素的样式会被子元素自身的任何样式覆盖（无论子元素选择器权重多低）。
   例：父元素 color: red，子元素 span { color: blue; } → 子元素显示蓝色。

总结

查看 CSS 优先级的核心工具是浏览器的「Styles」面板，通过规则的排列顺序和是否被划掉，可快速判断冲突原因。记住优先级的计算规则（!important > 内联样式 > ID > 类/伪类 > 元素），并尽量通过优化选择器的特异性（而非 !important）解决冲突，能让 CSS 更易维护。