解释 CSS 选择器的优先级（权重）规则。

CSS选择器的优先级（权重）规则是决定样式应用顺序的核心机制，以下是详细的解析：

一、优先级基本规则

CSS优先级根据选择器的类型和组合方式确定，总体遵循以下顺序（从高到低）：

1. !important声明
   任何样式声明后添加!important将获得最高优先级，覆盖其他所有规则（包括内联样式）。
   示例： color: red !important;
   注意事项： 滥用可能导致维护困难，且用户样式表中的!important可覆盖作者样式。

2. 内联样式（行内样式）
   直接在HTML元素的style属性中定义，权重为1000。
   示例： <div style="color: blue;">

3. ID选择器
   每个ID选择器的权重为100（如#header）。

4. 类选择器、伪类选择器、属性选择器
   权重为10，包括：

   • 类选择器（.class）
   • 伪类（:hover、:nth-child()）
   • 属性选择器（[type="text"]）。

5. 标签选择器、伪元素选择器
   权重为1，如div、::before。

6. 通用选择器、子选择器等
   如*、>、+、\~，权重为0，不影响优先级。

二、权重计算方式

当多个选择器组合时，权重通过累加计算，比较时从左到右逐级对比：

权重表示格式

通常以四组数字表示：(a, b, c, d)，其中：

• a: 内联样式的数量（0或1）
• b: ID选择器的数量
• c: 类、伪类、属性选择器的数量
• d: 标签、伪元素选择器的数量。

比较规则

1. 高位优先：先比较a，若相同则比较b，依此类推。
   示例：

   • #nav .item → (0,1,1,0)
   • div#header a:hover → (0,1,1,2)
     后者因d更高而优先级更高。

2. 组合选择器的叠加：

   • div.class#id → (0,1,1,1)
   • .list li.item → (0,0,2,2)
     权重总和决定优先级。

特殊情况

• 继承的样式：权重为0，直接定义的样式（即使权重低）会覆盖继承的样式。
• 通配符*：不参与权重计算

三、层叠规则与来源优先级

当权重相同时，样式的应用顺序由层叠规则决定：

1.后出现的样式覆盖前面的

同一来源中，后定义的规则生效。
示例：

p { color: red; }
p { color: blue; } /* 最终生效 */

2.样式来源的优先级（从高到低）：

• 用户样式表中的!important
• 作者样式表中的!important
• 内联样式
• ID选择器
• 类、属性等选择器
• 浏览器默认样式。

四、实验性选择器的影响

• :is()：优先级取决于列表中最高权重的选择器。
• :where()：优先级始终为0。
  示例：

:where(.class) { color: red; } /* 权重为0 */
:is(#id, .class) { color: blue; } /* 权重为100（ID的权重） */

五、工具与最佳实践

1. 计算工具：

   • VSCode：悬停选择器时可显示权重。
   • Specificity Calculator：在线计算权重。

2. 避免!important：

   • 优先通过优化选择器结构（如增加ID或类）提升权重。
   • 仅在覆盖第三方库样式等必要场景使用。

3. 继承属性的管理：

   • 使用inherit强制继承父元素样式。
   • 注意非继承属性（如width、margin）需显式定义。

六、总结（优先级速查表）

选择器类型	权重示例	优先级顺序
!important	无穷大	最高
内联样式（style属性）	(1,0,0,0)	第二
ID选择器（#id）	(0,1,0,0)	第三
类选择器（.class）	(0,0,1,0)	第四
标签选择器（div）	(0,0,0,1)	第五
通配符（*）	(0,0,0,0)	最低

通过合理利用优先级规则，开发者可以更精准地控制样式应用，提升代码可维护性。