1. 基础知识
什么是 CSS 层叠
CSS 层叠是一种控制网页元素样式的机制。
当多条样式规则指向同一个元素时,浏览器会根据一系列优先级规则来决定哪条规则最终生效。
为何要使用 CSS 层叠
CSS 层叠让网页设计变得灵活且高效。它可以帮助我们解决样式冲突,避免代码冗余,并确保网站在不同设备和浏览器上都能保持一致的外观和体验。
如何使用 CSS 层叠
根据层叠的规则,行内样式、内部样式、外部样式这3种样式表的优先级是:
行内样式 > 内部样式 > 外部样式
在此基础上,还需要理解几个通用的层叠规则:
重要性 :!important 标记的样式具有最高的执行权重。
专用性 :更具体的选择器将优先于通用选择器。
源代码顺序 :在其他条件相同的情况下,后出现的样式会覆盖先出现的样式。
2. 示例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠示例1</title>
<link rel="stylesheet" href="external.css">
<style>
p {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<p style="font-size: 24px;">Hello, CSS!</p>
</body>
</html>
在这个例子中,h1 元素的样式可以来自三个不同的来源:
-
外部样式 (external.css):
/* external.css */
p {
font-size: 20px;
font-weight: bold;
}
-
内部样式 (style 标签):
p {
font-size: 30px;
color: red;
}
-
行内样式 (style 属性):
<p style="font-size: 24px;">Hello, CSS!</p>
根据层叠的规则,样式表的优先级是:
行内样式 > 内部样式 > 外部样式
因此,p 元素最终的样式将包含来自这三个来源的样式:
字体加粗来自外部样式。
文本颜色来自内部样式。
字体大小来自行内样式。
这样,最终的 p 元素会同时具有这三个样式的特征,展现出混合的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>层叠示例2</title>
<style>
/* 通用选择器,低专用性 */
p {
color: blue;
}
/* 类选择器,高专用性 */
.highlight {
color: red;
}
/* ID选择器,更高专用性 */
#special {
color: green;
}
/* 同ID选择器,但后出现,将覆盖前者 */
#special {
color: purple;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="highlight">This is a highlighted paragraph.</p>
<p id="special">This is a special paragraph.</p>
</body>
</html>
第一个 p 元素将呈现为蓝色,因为只有一个基本的元素选择器作用于它
第二个 p 元素有一个类选择器 .highlight ,它比元素选择器更具体,因此文本将是红色。
最后一个 p 元素有两个 ID 选择器作用于它,但由于层叠的源代码顺序规则,它将呈现为紫色,因为后出现的 ID 选择器覆盖了前面的绿色样式。