CSS 中的 !important
规则用于为属性/值添加比正常情况更重要的重要性。
事实上,如果您使用 !important
规则,它将覆盖该规则之前的所有样式规则 该元素的特定属性!
让我们看一个例子:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
在上面的例子中。尽管 ID 选择器和类选择器具有更高的特异性,但所有三个段落都将获得红色背景颜色。在这两种情况下,!important
规则都会覆盖 background-color
属性。
覆盖 !important
的唯一方法 规则是包含另一个!重要
对源代码中具有相同(或更高)特异性的声明进行规则 - 这里问题就开始了! 这使得 CSS 代码变得混乱并且调试会很困难,特别是如果 你有一个很大的样式表!
这里我们创建了一个简单的例子。不是很清楚,看的时候 CSS 源代码,哪种颜色被认为是最重要的:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
提示:了解很重要!重要
规则。您可能会在一些 CSS 源代码中看到它。 但是,除非绝对必要,否则不要使用它。
使用 !important
的一种方法是如果您必须覆盖 不能以任何其他方式覆盖的样式。这可能是如果你是 在内容管理系统 (CMS) 上工作,无法编辑 CSS 代码。 然后你可以设置一些自定义样式来覆盖一些CMS样式。
另一种使用 !important
的方法是:假设您 想要页面上的所有按钮都有特殊的外观。在这里,按钮的样式为灰色 背景颜色、白色文本以及一些填充和边框:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>
</body>
</html>
如果我们将按钮放入另一个元素中,按钮的外观有时会改变 更高的特异性,并且属性会发生冲突。下面是一个例子:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>
为了“强制”所有按钮具有相同的外观,无论如何,我们可以添加 !important
按钮属性的规则,如下所示:
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>