上查看所有课程
!important 关键字用于提高 CSS 属性的优先级。例如，
/* HTML */
<p id="paragraph">This is a paragraph.</p>
/* CSS */
p#paragraph {
color: green;
}
p {
color: blue!important;
}浏览器输出
在此，我们有两个选择器（ID 选择器和元素选择器）来选择和样式化段落。
ID 选择器的优先级（特异性）高于元素选择器。但是，!important 关键字会覆盖其他样式，导致段落显示为 蓝色。
!important 的语法
!important 关键字的语法如下：
property: value !important;要使用 !important 关键字，我们需要将其添加到 CSS 属性值之后。
例如，要将 p 元素的文本颜色设置为 红色，我们将使用以下 CSS：
p {
color: red !important;
}这将确保 p 元素的文本颜色为 红色，即使存在其他更具特异性的 CSS 规则。
CSS 中的优先级级别
在 CSS 中，选择器的优先级级别从高到低如下：
- ID 选择器
- 类选择器
- 属性选择器
- 伪类选择器
- 类型选择器
- 通用选择器
- 继承的样式
这意味着即使其他选择器也已将样式应用于元素，ID 选择器提供的样式也会被应用。
但是，当我们向任何样式添加 !important 时，它将获得所有样式中最高的优先级。这意味着它会覆盖所有冲突的 CSS 样式，无论其特异性有多高。
示例：CSS !Important 关键字
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS !important</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Heading</h1>
<p>This is the first paragraph.</p>
<p class="paragraph">This is the second paragraph.</p>
<p id="unique">This is the third paragraph.</p>
</body>
</html>/* class selector */
.paragraph {
color: green;
}
/* id selector */
#unique {
color: purple;
}
/* using !important on element selector */
p {
color: red !important;
}浏览器输出
在此，所有 p 元素均显示为 红色。
这是因为元素选择器中的 !important 关键字覆盖了其他更高优先级的规则。
注意：!important 关键字有助于解决样式冲突。但是，不建议过度使用它，因为它会使代码调试和维护变得复杂。