手册
目录
收藏428
分享
阅读4391
更新时间2025-07-16
如果有两个或多个 CSS 规则指向同一个 HTML 元素，则优先级（specificity）更高的选择器会“胜出”，它的样式声明将被应用到该 HTML 元素上。
可以把优先级想象成一种层级结构，它决定了哪一个样式声明最终会被应用到元素上。
请看下面的几个例子：
在这里，我们使用了元素选择器 "p"，并为该元素设置了红色（red）的字体颜色。结果： 文字将显示为红色：
<html><br></br><head><br></br> <style><br></br> p {color: red;} <br></br>
</style><br></br></head><br></br><body><br></br><br></br><p>Hello World!</p><br></br><br></br></body><br></br>
</html>运行实例 »点击 "运行实例" 按钮查看在线实例
现在，看看示例 2：
在这里，我们添加了一个类选择器（名为 "test"），并为该类设置了绿色（green）的字体颜色。结果： 文字将显示为绿色（即使我们为元素选择器 "p" 设置了红色）。这是因为类选择器的优先级更高：
<html><br></br><head><br></br> <style><br></br> .test {color: green;}
<br></br> p {color: red;} <br></br> </style><br></br></head><br></br><body><br></br><br></br><p class="test">Hello World!</p><br></br><br></br></body><br></br></html>运行实例 »点击 "运行实例" 按钮查看在线实例
现在，看看示例 3：
在这里，我们添加了一个 ID 选择器（名为 "demo"）。结果： 文字将显示为蓝色（blue），因为 ID 选择器的优先级更高：
<html><br></br><head><br></br> <style><br></br> #demo {color: blue;}<br></br>
.test {color: green;} <br></br> p {color: red;} <br></br>
</style><br></br></head><br></br><body><br></br><br></br><p id="demo" class="test">Hello
World!</p><br></br><br></br></body><br></br></html>运行实例 »点击 "运行实例" 按钮查看在线实例
现在，看看示例 4：
在这里，我们为 "p" 元素添加了内联样式（inline style）。结果： 文字将显示为粉色（pink），因为内联样式的优先级最高：
<html><br></br><head><br></br> <style><br></br> #demo {color: blue;}<br></br>
.test {color: green;} <br></br> p {color: red;} <br></br>
</style><br></br></head><br></br><body><br></br><br></br><p id="demo" class="test"
style="color: pink;">Hello World!</p><br></br><br></br></body><br></br></html>运行实例 »点击 "运行实例" 按钮查看在线实例
每个 CSS 选择器在优先级层级中都有其特定的位置。
| 优先级 | 示例 | 描述 |
|---|---|---|
| 内联样式 | <h1 style="color: pink;"> | 最高优先级，直接通过 style 属性应用 |
| ID 选择器 | \#navbar | 第二高优先级，通过元素的唯一 id 属性识别 |
| 类选择器和伪类选择器 | .test, :hover | 第三高优先级，通过类名进行定位 |
| 属性选择器 | \[type="text"\] | 较低优先级，应用于属性 |
| 元素选择器和伪元素选择器 | h1, ::before, ::after | 最低优先级，应用于 HTML 元素和伪元素 |
相同优先级：最后定义的规则胜出 - 如果相同的规则在外部样式表中写了两次，则最后定义的那条规则会生效：
h1 {background-color: yellow;}<br></br>
h1 {background-color: red;}运行实例 »点击 "运行实例" 按钮查看在线实例
ID 选择器的优先级高于属性选择器 - 请看以下三行代码：
div#myDiv {background-color: green;}<br></br>#myDiv {background-color: yellow;}<br></br>div[id=myDiv] {background-color: blue;}运行实例 »点击 "运行实例" 按钮查看在线实例
其中第一条规则比另外两条规则更具体，因此会被应用。
上下文选择器比单个元素选择器更具体 - 内嵌样式表更靠近要设置样式的元素。所以在以下情况下：
/*From external CSS file:*/<br></br>#content h1 {background-color: red;}<br></br><br></br>
/*In HTML file:*/<br></br><style><br></br>#content h1 {background-color:
yellow;}<br></br></style>运行实例 »点击 "运行实例" 按钮查看在线实例
最后定义的规则会生效。
类选择器优先于任意数量的元素选择器 - 类选择器如 .intro 会覆盖 h1、p、div 等元素选择器：
.intro {background-color: yellow;}<br></br>h1 {background-color:
red;}运行实例 »点击 "运行实例" 按钮查看在线实例
通用选择器（*）和继承的值 - 通用选择器（*）以及继承的值不会影响优先级的权重：
* {background-color: yellow;}<br></br>h1 {background-color: red;}运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习
