CSS - 2、样式表的优先级

在CSS中，样式表的优先级是一个非常重要的概念，它决定了当多个样式规则冲突时，哪一个规则会被应用到HTML元素上。理解优先级规则可以帮助开发者更好地控制页面的样式表现，避免意外的样式冲突。

CSS样式的优先级规则

CSS样式的优先级由高到低依次为：

1. 内联样式（Inline CSS）
2. 内部样式表（Internal CSS）
3. 外部样式表（External CSS）
4. 浏览器默认样式（User Agent Stylesheet）

1. 内联样式

内联样式是直接写在HTML元素的style属性中的样式。由于内联样式直接作用于元素本身，它的优先级最高。

<p style="color: red;">这是一段红色的文字</p>

2. 内部样式表

内部样式表是写在HTML文档的<style>标签中的样式。它的优先级低于内联样式，但高于外部样式表。

<style>
    p {
        color: blue;
    }
</style>

3. 外部样式表

外部样式表是写在单独的.css文件中，并通过<link>标签引入HTML文档的样式。它的优先级最低（在开发者定义的样式中）。

/* styles.css */
p {
    color: green;
}

<link rel="stylesheet" href="styles.css">

4. 浏览器默认样式

浏览器默认样式是浏览器为HTML元素预设的样式规则。如果没有开发者定义的样式，浏览器默认样式会生效。它的优先级最低。

---

特殊情况：!important

在CSS中，!important是一个特殊的声明，用于提高样式的优先级。当样式规则中包含!important时，该规则的优先级会高于其他相同选择器的规则，甚至高于内联样式。

示例：

/* 外部样式表 */
p {
    color: green !important;
}

<p style="color: red;">这是一段文字</p>

尽管内联样式的优先级通常高于外部样式表，但由于外部样式表中使用了!important，最终文字颜色会是绿色。

注意： !important虽然可以强制样式生效，但过度使用会破坏CSS的自然层叠规则，导致样式难以维护。因此，建议尽量避免使用!important，除非在必要的情况下（如覆盖第三方库的样式）。

---

样式优先级的详细规则

当多个样式规则冲突时，CSS会按照以下顺序确定最终生效的样式：

1. 来源优先级：

   • 内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式

2. 选择器优先级：

   • 如果多个规则来自同一来源（如都是外部样式表），则选择器的优先级会决定最终生效的样式。
   • 选择器优先级从高到低依次为：
     1. 内联样式（通过style属性）
     2. ID选择器（#id）
     3. 类选择器、属性选择器和伪类（.class、[attribute]、:hover）
     4. 元素选择器和伪元素（div、::before）

3. 规则的顺序：

   • 如果多个规则的选择器优先级相同，则后定义的规则会覆盖先定义的规则（即“后写覆盖先写”）。

示例：

/* 外部样式表 */
p {
    color: green; /* 规则1 */
}

#main p {
    color: blue; /* 规则2 */
}

p {
    color: red; /* 规则3 */
}

<div id="main">
    <p>这是一段文字</p>
</div>

• 规则1：color: green，优先级最低。
• 规则2：color: blue，使用了ID选择器，优先级更高。
• 规则3：color: red，与规则1优先级相同，但由于后写，会覆盖规则1。

最终，<p>元素的颜色会是蓝色，因为规则2的优先级最高。

---

总结

CSS样式的优先级规则如下：

1. 来源优先级：
   • 内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
2. 选择器优先级：
   • 内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素
3. 规则顺序：后写覆盖先写
4. 特殊情况：!important声明的样式优先级最高，但应尽量避免使用。