# 优先级与层叠

URL: https://caijiao.org/css/02-selectors/06-specificity
Source: docs/css/02-selectors/06-specificity.md
Description: 理解CSS中的优先级规则和层叠机制，有助于准确控制样式的应用顺序，解决样式冲突问题。

当多个CSS规则作用于同一元素时，浏览器根据“优先级”与“层叠规则”决定最终应用的样式。

## 1. 优先级（Specificity）

每个选择器都有一个优先级值，优先级越高的规则将覆盖低优先级的规则。

- 内联样式（如 `style=""`）优先级最高。
- ID选择器 `#id` 优先级高于类 `.class` 和元素选择器。
- 选择器越具体，优先级越高。

示例优先级从高到低：
```css
style="..."            /* 内联样式 */
#header                /* ID选择器 */
.nav .item             /* 类选择器组合 */
div p                  /* 元素选择器 */
````

## 2. !important 的使用

使用 `!important` 可以强制提升某条规则的优先级，覆盖其他规则。

```css
p { color: red !important; }
```

但建议谨慎使用，以免增加样式维护难度。

## 3. 层叠（Cascading）

当选择器优先级相同时，遵循以下规则决定生效顺序：

* 后写的样式覆盖先写的样式；
* 外部样式表 < 内部样式表 < 内联样式；
* 浏览器默认样式 < 用户样式 < 作者样式；

理解并合理运用优先级与层叠机制，是CSS调试和结构优化的关键。