层叠样式表/重要
important 关键字使声明优先于普通声明 - 没有被标记为 important 关键字的声明。因此 "p { color: red ! important }" 优先于 "p { color: green }"。
重要声明的语法是
- 属性：值 ! 重要
规则的相对重要性也取决于其来源：是来自文档作者、用户或用户代理指定的样式表。
从不重要到最重要的声明顺序
- 用户代理声明
- 用户普通声明
- 作者普通声明
- 作者重要声明
- 用户重要声明
用户重要声明优先于其他所有声明。这允许用户覆盖页面设计者的演示，以满足他们的需求。例如，用户可以覆盖文本颜色，使其在黑色背景上以大字体显示为黄色，以使文本更容易阅读。
确定来自一个或多个样式表中的哪个规则适用于给定元素的过程称为级联，因此得名层叠样式表。
用于此示例的 HTML 文档是
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>'!important' CSS declarations</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Paragraph 1.</p>
<p id="para2">Paragraph 2.</p>
<p>Paragraph 3.</p>
</body>
</html>
该文档使用样式表 style.css 进行样式设置
p {
background-color:#fff ;
color:#000 ! important
}
#para2 {
background-color:#fc9 ;
color:#00f ;
border:1px solid black
}
p {
background-color:#9cf ;
color:#f00
}
这三段将如何呈现？
考虑第一个段落元素 (
段落 1。
).
第一个和第三个选择器 (p 选择器) 与元素匹配。第二个选择器 (#para2) 与元素不匹配。与元素匹配的两个选择器的规则将应用于元素。这些规则按它们在源代码中出现的顺序列出，如下所示：
| 声明 | 选择器 | 权重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特异性 | ||||||||
| 属性 | 值 | 重要性* | 样式属性 |
ID 选择器 |
类 选择器 |
元素 选择器 |
来源 顺序** |
|
| 背景颜色 | #fff | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 1 |
| 颜色 | #000 | p | 作者重要 (等级 4) |
0 | 0 | 0 | 1 | 2 |
| 背景颜色 | #9cf | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 6 |
| 颜色 | #00f | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 7 |
- * 重要性的等级范围从 1（最不重要）到 5（最重要）。本页的后续示例显示了其他等级。
- ** 源代码顺序列是声明在文件中的位置，例如
background-color:#9cf是文件中的第六个声明。
应用于元素的规则按属性排序。对于每个属性，规则按重要性升序排序，然后按特异性（样式属性、ID 选择器、类选择器、元素选择器）排序，然后按源代码顺序排序。来自排序列表的最后一个属性值获胜（即最重要的、最具体的规则的值）。
| 声明 | 选择器 | 权重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特异性 | ||||||||
| 属性 | 值 | 重要性 | 样式属性 |
ID 选择器 |
类 选择器 |
元素 选择器 |
来源 顺序 |
|
| 背景颜色 | #fff | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 1 |
| 背景颜色 | #9cf | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 6 |
| 颜色 | #00f | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 7 |
| 颜色 | #000 | p | 作者重要 (等级 4) |
0 | 0 | 0 | 1 | 2 |
- 使用的声明将以粗体显示，以及决定规则之间胜负的获胜者。
background-color 设置为 #9cf（浅蓝色）。background-color 属性的两个规则具有相同的重要性以及特异性，因此第二个规则获胜，因为它在源代码中出现较晚。
color 设置为 #000（黑色）。color 属性的规则具有不同的重要性，因此最重要的规则获胜。
第一段呈现为
段落 1。
考虑第二个段落元素 (
段落 2。
).
第一个和第三个选择器 (p 选择器) 与元素匹配。第二个选择器 (#para2) 也与元素匹配。所有三个选择器的规则都将应用于元素。这些规则按它们在源代码中出现的顺序列出，如下所示：
| 声明 | 选择器 | 权重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特异性 | ||||||||
| 属性 | 值 | 重要性 | 样式属性 |
ID 选择器 |
类 选择器 |
元素 选择器 |
来源 顺序 |
|
| 背景颜色 | #fff | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 1 |
| 颜色 | #000 | p | 作者重要 (等级 4) |
0 | 0 | 0 | 1 | 2 |
| 背景颜色 | #fc9 | #para2 | 作者普通 (等级 3) |
0 | 1 | 0 | 0 | 3 |
| 颜色 | #00f | #para2 | 作者普通 (等级 3) |
0 | 1 | 0 | 0 | 4 |
| 边框 | 1px 实线 黑色 | #para2 | 作者普通 (等级 3) |
0 | 1 | 0 | 0 | 5 |
| 背景颜色 | #9cf | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 6 |
| 颜色 | #00f | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 7 |
排序规则得到
| 声明 | 选择器 | 权重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特异性 | ||||||||
| 属性 | 值 | 重要性 | 样式属性 |
ID 选择器 |
类 选择器 |
元素 选择器 |
来源 顺序 |
|
| 背景颜色 | #fff | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 1 |
| 背景颜色 | #9cf | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 6 |
| 背景颜色 | #fc9 | #para2 | 作者普通 (等级 3) |
0 | 1 | 0 | 0 | 3 |
| 边框 | 1px 实线 黑色 | #para2 | 作者普通 (等级 3) |
0 | 1 | 0 | 0 | 5 |
| 颜色 | #00f | #para2 | 作者普通 (等级 3) |
0 | 1 | 0 | 0 | 4 |
| 颜色 | #00f | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 7 |
| 颜色 | #000 | p | 作者重要 (等级 4) |
0 | 0 | 0 | 1 | 2 |
background-color 设置为 #fc9（浅橙色）。具有 ID 选择器的规则具有比其他两个规则更高的特异性，因此它获胜。
border 属性只有一个规则，因此它被设置为 1px 实线 黑色。
color 设置为 #000（黑色）。color 属性的规则具有不同的重要性，因此最重要的规则获胜。
第二段呈现为
段落 2。
第三段与第一段完全相同的选择器匹配，因此应用了完全相同的值。
第三段呈现为
段落 3。
段落 1。
段落 2。
段落 3。
在此示例中，我们将研究当将以下用户样式表 user.css 与前一个示例中的样式表结合使用时，文档的外观如何改变。（有关如何设置用户样式表的更多信息，请参阅章节 用户样式表。）
p {
color:#ff0 ! important ;
background-color:#808080 ;
font-family:cursive
}
考虑第一个段落元素。来自用户样式表的单个选择器与元素匹配。来自 style.css 的第一个和第三个选择器 (p 选择器) 也与元素匹配。来自 style.css 的第二个选择器 (#para2) 与元素不匹配。应用于元素的规则按它们在源代码中出现的顺序列出，如下所示：
| 声明 | 选择器 | 权重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特异性 | ||||||||
| 属性 | 值 | 重要性* | 样式属性 |
ID 选择器 |
类 选择器 |
元素 选择器 |
来源 顺序** |
|
| 颜色 | #ff0 | p | 用户重要 (等级 5) |
0 | 0 | 0 | 1 | 1:1 |
| 背景颜色 | #808080 | p | 用户普通 (等级 2) |
0 | 0 | 0 | 1 | 1:2 |
| 字体系列 | 草书 | p | 用户普通 (等级 2) |
0 | 0 | 0 | 1 | 1:3 |
| 背景颜色 | #fff | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 2:1 |
| 颜色 | #000 | p | 作者重要 (等级 4) |
0 | 0 | 0 | 1 | 2:2 |
| 背景颜色 | #9cf | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 2:6 |
| 颜色 | #00f | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 2:7 |
- * 重要性的等级范围从 1（最不重要）到 5（最重要）。请注意，来自用户样式表的规则要么是普通声明的等级 2，要么是重要声明的等级 5。
- ** 源代码顺序列中的第一个数字给出包含规则的文件的加载顺序。在本例中，
user.css在style.css之前加载。第二个数字是声明在文件中的位置。例如background-color:#9cf是第二个文件中的第六个声明。
排序规则得到
| 声明 | 选择器 | 权重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特异性 | ||||||||
| 属性 | 值 | 重要性* | 样式属性 |
ID 选择器 |
类 选择器 |
元素 选择器 |
来源 顺序** |
|
| 背景颜色 | #808080 | p | 用户普通 (等级 2) |
0 | 0 | 0 | 1 | 1:2 |
| 背景颜色 | #fff | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 2:1 |
| 背景颜色 | #9cf | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 2:6 |
| 颜色 | #00f | p | 作者普通 (等级 3) |
0 | 0 | 0 | 1 | 2:7 |
| 颜色 | #000 | p | 作者重要 (等级 4) |
0 | 0 | 0 | 1 | 2:2 |
| 颜色 | #ff0 | p | 用户重要 (等级 5) |
0 | 0 | 0 | 1 | 1:1 |
| 字体系列 | 草书 | p | 用户普通 (等级 2) |
0 | 0 | 0 | 1 | 1:3 |
background-color 属性有两个具有相同最高重要性的规则。这两个规则的特异性也相同，因此它们按源代码顺序拆分。背景颜色设置为作者的选择，而不是用户的选择。
用户样式表中 color 的重要声明具有此属性的最高重要性，因此使用用户的文本颜色选择，而不是页面作者的选择。
font-family 只有一个规则，即用户的规则，因此使用用户的选择。
段落呈现为
段落 1。
段落 2。
段落 3。
已知此错误发生在 Windows XP 上的 Internet Explorer 6.0 和 7.0 版本中；但是，8.0 版本不受影响。
Internet Explorer 处理!important存在一个 bug。如果在同一个代码块中，一个重要声明后面跟着一个针对同一属性的普通声明，Internet Explorer 会将两个声明都视为普通声明。例如，在 IE v6.0 中，以下样式表会错误地将段落渲染成黄底红字。段落应该呈现为黑底白字，因为前两个声明都是重要的。
p {
background-color: black ! important ;
color: white ! important;
background-color: red ;
color: yellow
}
您可以通过在样式表中添加一条额外的规则来验证这些声明是否恢复为普通声明。
p {
background-color: black ! important ;
color: white ! important;
background-color: red ;
color: yellow
}
p {
color: green
}
在 IE v6.0 中，这将导致段落呈现为红底绿字，表明所有color声明都被视为普通声明。
如果您从第一个代码块中删除第二个color声明
p {
background-color: black ! important ;
color: white ! important;
background-color: red ;
}
p {
color: green
}
段落将变为红底白字。这表明第一个代码块中的color声明现在被正确地视为重要声明。
很多人建议利用这个 bug 来传递不同于其他浏览器的值给 Internet Explorer。如果您需要这样做，一个更好的解决方案是使用条件注释。