CSS !important 属性


目录

    显示目录


什么是重要的?

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

覆盖 !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 的一两次合理使用

使用 !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>