CSS 優先級 specificity

在 CSS 中，优先级（specificity）决定了哪些样式最终会被应用到元素上。

优先级不仅仅取决于“最后应用的规则”，还与选择器的类型和复杂度相关。CSS 并不完全依赖“最后定义”的规则，而是依据 选择器的特定性（specificity）来判断优先级。

CSS 优先级规则

1 .行内样式（Inline styles）:

优先级最高。

行内样式直接应用于元素，比如：

<div style="color: red;">。

2 .ID 选择器（例如 #id）：

比类选择器和标签选择器具有更高的优先级。

例如：#header 的优先级高于 .custom-title 或 h1。

3. 类选择器（例如 .class）、属性选择器（例如 [type="text"]）、伪类选择器（例如 :hover）：

这些选择器的优先级相同，但低于 ID 选择器和行内样式。

例如：.custom-title 和 h1 的优先级低于 ID 选择器。

4.元素选择器（例如 h1）：

优先级最低。

例如：h1 选择器的优先级低于 .custom-title 或 #header。

5.组合选择器：

复合选择器（例如 .custom-title h1 或 div p）的优先级是组合选择器中每个部分优先级的总和。

.custom-title h1 比 h1 有更高的优先级，因为它结合了类选择器和元素选择器。

• 範例

h1 {
  font-size: 24px;
}

.custom-title h1 {
  font-size: 32px;
}

在这种情况下，.custom-title h1 选择器会 盖写（覆盖）掉全局的 h1 样式，因为它是一个更具体的选择器，并且具有更高的优先级。