CSS 优先级规则决定了当多个样式规则应用于同一个元素时，哪个规则会被最终应用。理解优先级规则对于编写可预测、可维护的 CSS 至关重要。
CSS（Cascading Style Sheets）中的"层叠"指的是样式的叠加和优先级处理机制。浏览器按照特定的规则决定最终应用哪些样式。
/* 规则 1 */
p {
color: blue;
}
/* 规则 2 */
.text {
color: green;
}
/* 规则 3 */
#content {
color: red;
}
/* 应用到这个元素 */
<p id="content" class="text">这段文字是什么颜色？</p>
/* 层叠过程：
* 1. 收集所有匹配的规则
* 2. 按优先级排序
* 3. 应用优先级最高的规则
* 结果：红色
*/
CSS 优先级从高到低的层次结构：
!important 具有最高优先级，会覆盖其他所有样式。
/* 普通声明 */
.text {
color: blue;
}
/* !important 声明 */
.text {
color: red !important;
}
/* 即使有更高优先级的选择器 */
#content {
color: green;
}
/* 结果：红色 - !important 优先级最高 */
内联样式（通过 style 属性设置）具有很高的优先级。
/* CSS 规则 */
.text {
color: blue;
}
/* HTML 元素 */
<p class="text" style="color: red;">这段文字是红色的</p>
/* 结果：红色 - 内联样式优先级高 */
ID 选择器优先级高于类选择器和元素选择器。
/* ID 选择器 */
#content {
color: red;
}
/* 类选择器 */
.text {
color: blue;
}
/* 元素选择器 */
p {
color: green;
}
/* 结果：红色 - ID 选择器优先级最高 */
这些选择器具有相同的优先级。
/* 类选择器 */
.text {
color: blue;
}
/* 属性选择器 */
[class="text"] {
color: green;
}
/* 伪类选择器 */
.text:hover {
color: purple;
}
/* 优先级相同，后定义的生效 */
这些选择器优先级较低。
/* 元素选择器 */
p {
color: blue;
}
/* 伪元素选择器 */
p::first-line {
color: green;
}
/* 结果：绿色 - 伪元素优先级略高 */
通配符选择器优先级最低。
/* 通配符选择器 */
* {
color: blue;
}
/* 元素选择器 */
p {
color: green;
}
/* 结果：绿色 - 元素选择器优先级更高 */
继承的样式优先级最低。
/* 父元素样式 */
body {
color: blue;
}
/* 子元素样式 */
p {
color: green;
}
/* 结果：绿色 - 直接定义的样式优先级更高 */
CSS 优先级用一个三元组表示：(ID 选择器数量, 类选择器数量, 元素选择器数量)。
/* 优先级：(0,0,0) */
* {
color: black;
}
/* 优先级：(0,0,1) */
p {
color: blue;
}
/* 优先级：(0,1,0) */
.text {
color: green;
}
/* 优先级：(1,0,0) */
#content {
color: red;
}
/* 优先级：(0,0,2) */
div p {
color: blue;
}
/* 优先级：(0,1,1) */
div .text {
color: green;
}
/* 优先级：(1,0,1) */
#content p {
color: red;
}
/* 优先级：(1,1,0) */
#content .text {
color: purple;
}
/* 规则 A：优先级 (1,0,0) */
#header {
color: red;
}
/* 规则 B：优先级 (0,10,10) */
.nav .menu .item .link .text {
color: blue;
}
/* 比较过程：
* 第一位：1 > 0
* 所以规则 A 优先级更高
* 结果：红色
*/
当优先级相同时，后定义的规则会覆盖先定义的规则。
/* 先定义 */
.text {
color: blue;
}
/* 后定义 */
.text {
color: red;
}
/* 结果：红色 */
/* 规则 1 */
.text {
color: blue;
}
/* 规则 2 - 优先级更高 */
.container .text {
color: green;
}
/* 规则 3 - 优先级最高 */
#main .container .text {
color: red;
}
/* 规则 1 */
.text {
color: blue !important;
}
/* 规则 2 */
#content {
color: red;
}
/* 结果：蓝色 - !important 优先级最高 */
<!DOCTYPE html>
<html>
<head>
<!-- 外部样式表 -->
<link rel="stylesheet" href="external.css">
<!-- 内部样式表 -->
<style>
.text {
color: green;
}
</style>
</head>
<body>
<!-- 内联样式 -->
<p class="text" style="color: red;">这段文字是红色的</p>
</body>
</html>
/* external.css */
.text {
color: blue;
}
/* 优先级顺序：
* 1. 内联样式（最高）
* 2. 内部样式表
* 3. 外部样式表（最低）
* 结果：红色
*/
<!DOCTYPE html>
<html>
<head>
<!-- 先引入 -->
<link rel="stylesheet" href="styles1.css">
<!-- 后引入 -->
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<p class="text">内容</p>
</body>
</html>
/* styles1.css */
.text {
color: blue;
}
/* styles2.css */
.text {
color: red;
}
/* 结果：红色 - 后引入的样式表优先级更高 */
/* 基础按钮样式 */
.button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 主要按钮 */
.button.primary {
background: #0056b3;
}
/* 禁用按钮 */
.button:disabled {
background: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
/* 冲突 - 禁用的主要按钮 */
.button.primary:disabled {
/* 优先级：(0,2,1) */
background: #343a40 !important;
}
/* 导航链接基础样式 */
.nav-link {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
/* 悬停效果 */
.nav-link:hover {
background: rgba(255,255,255,0.1);
}
/* 当前页面链接 */
.nav-link.active {
background: #007bff;
font-weight: bold;
}
/* 冲突 - 当前页面的悬停效果 */
.nav-link.active:hover {
/* 优先级：(0,2,1) */
background: #0056b3;
}
/* 卡片基础样式 */
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
/* 特殊卡片 */
.card.special {
border: 2px solid #007bff;
}
/* 冲突 - 特殊卡片的背景 */
.card.special {
/* 优先级：(0,2,0) */
background: #f8f9fa;
}
现代浏览器的开发者工具可以显示样式的优先级和覆盖情况：
/* 调试样式 - 高优先级 */
.debug {
border: 3px solid red !important;
background: yellow !important;
}
在线工具可以帮助计算 CSS 选择器的优先级：
/* 不推荐 - 过度使用 !important */
.button {
color: white !important;
background: blue !important;
padding: 10px !important;
border: none !important;
}
/* 推荐 - 使用更高优先级的选择器 */
.button.primary {
color: white;
background: blue;
padding: 10px;
border: none;
}
/* 推荐 - 语义化的类名 */
.article-title {
font-size: 24px;
color: #333;
}
/* 不推荐 - 描述样式的类名 */
.big-text {
font-size: 24px;
color: #333;
}
/* 不推荐 - 过度嵌套 */
body div.container div.content div.article div.title {
font-size: 24px;
}
/* 推荐 - 使用类选择器 */
.article-title {
font-size: 24px;
}
/* 推荐 - 简洁的选择器 */
.button {
padding: 10px 20px;
}
/* 不推荐 - 复杂的选择器 */
div.container div.row div.col button.btn-primary {
padding: 10px 20px;
}
理解 CSS 优先级规则对于编写可维护的 CSS 至关重要：
记住以下几点：
在接下来的章节中，我们将学习 CSS 的各种属性和布局技巧，进一步完善我们的 CSS 知识体系。