- 优先级规则：行内样式 > 内部样式 = 外部样式
内部样式、外部样式，这两者的优先级相同，且：后面的会覆盖前面的（后来居上）
同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（后来居上）
| 分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
|---|---|---|---|---|
| 行内样式 | 优先级最高 | 1.结构与样式为分离 2.代码结构混乱 3.样式不能复用 | 很低 | 当前标签 |
| 内部样式 | 1.样式可复用 2.代码结构清晰 | 1.结构与样式未彻底分离 2.样式不能多页面复用 | 一般 | 当前页面 |
| 外部样式 | 1.样式可多页面复用 2.代码结构清晰 3.可触发浏览器的缓存机制 4.结构与样式彻底分离 | 需要引入才能使用 | 最高 | 多个页面 |
- 代码：
样式表的优先级.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式表的优先级</title>
<!-- 外部样式 -->
<link rel="stylesheet" href="./index.css">
<!-- 内部样式 -->
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;">我是一级标题</h1>
</body>
</html>
index.css
h1 {
color: green;
}
扫一扫
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
