html - 在 CSS 中使用“！important”有什么含义？

Question

我已经在一个网站上工作了几个月，很多时候当我试图编辑一些东西时，我不得不使用!important，例如：

div.myDiv { 
    width: 400px !important;
}

以使其按预期显示。这是不好的做法吗？或者该!important命令可以使用吗？这会导致任何不受欢迎的事情发生吗？

score 272 · Accepted Answer

是的，我会说您的使用示例!important是不好的做法，而且很可能会进一步导致不良影响。这并不意味着它永远不能使用。

有什么问题`!important`：

当浏览器决定 CSS 如何影响页面时，特异性是起作用的主要力量之一。选择器越具体，它的重要性就越大。这通常与所选元素出现的频率一致。例如：

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

在这个页面上，所有按钮都是黑色的。除了带有“highlight”类的按钮，它们是蓝色的。除了 ID 为“buyNow”的唯一按钮，它是绿色的。整个规则的重要性（在这种情况下包括颜色和字体大小）由选择器的特殊性管理。

!important但是，是在属性级别而不是选择器级别添加的。例如，如果我们使用这个规则：

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

那么颜色属性将比字体大小具有更高的重要性。事实上，颜色比button#buyNow选择器中的颜色更重要，而不是字体大小（它仍然由常规 ID 与类特异性控制）。

一个元素<button class="highlight" id="buyNow">的字体大小为2em，但颜色为blue。

这意味着两件事：

选择器并没有准确传达其中所有规则的重要性
覆盖蓝色的唯一方法是使用另一个 !important声明，例如在button#buyNow选择器中。

这不仅使您的样式表更难维护和调试，而且还会产生滚雪球效应。一个!important导致另一个覆盖它，另一个导致另一个覆盖它，等等。它几乎永远不会只停留在一个人身上。尽管一个!important可能是一个有用的短期解决方案，但从长远来看，它会反过来咬你一口。

什么时候可以使用：

覆盖用户样式表中的样式。

这就是!important最初发明的目的：为用户提供一种覆盖网站样式的方法。它被屏幕阅读器、广告拦截器等辅助工具广泛使用。

覆盖第 3 方代码和内联样式。

一般来说，我会说这是代码异味的情况，但有时你别无选择。作为开发人员，您的目标应该是尽可能多地控制您的代码，但在某些情况下，您的双手被束缚，您只需要处理现有的任何内容。!important谨慎使用。

实用程序类

许多库和框架都带有实用程序类，如.hidden、.error或.clearfix. 它们服务于单一目的，并且通常应用很少但非常重要的规则。（例如，display: none对于一个.hidden班级）。!important这些应该覆盖元素上当前的任何其他样式，如果你问我，绝对值得。

结论

使用!important声明通常被认为是不好的做法，因为它具有与 CSS 的核心机制之一混淆的副作用：特异性。在许多情况下，使用它可能表明 CSS 架构不佳。

在某些情况下，它是可以容忍的，甚至是首选的，但请确保在使用之前仔细检查其中一种情况是否确实适用于您的情况。

score 18 · Accepted Answer

!important强制声明始终适用，执行以下操作：

即使选择器不那么具体且级别较低，它现在也可以击败更高特异性的选择器
如果该语句的进一步出现通常会覆盖该语句，则它不再覆盖重要语句

大多数时候，!important可以避免，因为选择器的特殊性处理哪个生效，这就是级联样式的想法。但是，在某些情况下（不太记得确切的情况），特异性不是那么合乎逻辑，我必须强行!important声明。

不使用/避免的原因!important？

阻止用户使用自定义样式表（现在不能覆盖标记为重要的规则），这会破坏某些人的可访问性
使代码更难阅读，因为大脑通常很容易理解特定性，但记住是什么会!important使其更难阅读

score 10 · Accepted Answer

我认为我们再次触及这一点很重要，在 2014 年底，当更多规则被添加到工作草案中时，不要对您的用户施加限制非常重要。我写了这个小例子来解释发生这种事情的可能场景。这是从我在网络上访问过的一个真实网站中获取的，很遗憾，我经常看到它。

表单文本编辑器字段

你有一个网站，你的网站依赖于填写表格和编辑文本。为了尽量减少眼睛疲劳，您尝试使用您认为每个人都可以接受的样式，并且由于您的用户主要在晚上访问，您决定将背景颜色设置为白色，然后将文本颜色设置为黑色. 该表单默认为空白，因此您输入文本（这一次）以确保它有效：

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

几个月后，用户抱怨黑底白字太费眼，但另一半喜欢它，你怎么办？您添加了一个自定义主题，该主题使用 !important 覆盖内部样式，以便双方都满意，这就是它应该用于的用途：

...
background-color: white !important;   
color: black !important;
...

现在，这里发生了什么？你期待什么。如果您正确记住了第一组中的 !important 标签，您会注意到它不起作用，并且可能记得您需要删除 !important 标签。但是你忘记了一个..

对，您会在白色背景上看到白色文本，如果用户尝试使用这种新样式（假设您保留它），他们将根本无法阅读您的网页。

当然，您没有意识到这一点，因为文本框是空的。你假设它会起作用！（假设是开发人员最大的敌人，它就在骄傲和自大的地方）。

制定并遵守自我暗示的规则

因此，在将 OVERRIDES 设计为原始完整的 css 规则集时，基本规则应该只使用 !important 。请记住，它是为例外而设计的，并且首先扰乱了 css 的自然顺序和含义。在大多数情况下，您根本不需要使用它。

了解用户如何自定义颜色

随着诸如扩展之类的工具的存在以及诸如“userstyles.org”之类的网站的存在以及它的时尚对应物，您冒着使用 !important 标签疏远您的用户的风险！请记住，时尚不会覆盖它们。

永远不要限制您的访客

如果您在样式上使用 !important，请确保您可以让用户关闭该样式（我不是指通过 Web 浏览器的内部“开/关”开关）。看在上帝的份上，不要让它成为默认值。

这个问题有点晚了，但它说“无论应用什么其他样式，都忽略它们并使用这个”。!您可能会发现它与infront (of )有点混淆，!important因为这在 javascript 中是一个 not 运算符，但在 css 中它被称为分隔符标记，只是表示优先。这是一个例子。

没有!important：

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

输出红色

!important在底部属性（相同）

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

输出红色（本来应该是红色的）

!important在顶部属性（相同的）

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

输出蓝色（说忽略红色，使用蓝色）

score 5 · Accepted Answer

我不建议您使用它，除非它是必要的，有时您可能会遇到这种情况，因为您正在处理现有项目。但尽量远离它并尽可能少地使用 !important 。

问题是如果你使用太多，那么其中一个可能会无意中覆盖另一个。你的代码也不太清晰，任何在你之后维护它的人都会撕破他/她的头发，因为每次你在 CSS 中做某事时都试图找到 !important 是一件非常痛苦的事情。

检查这个：http ://webdesign.about.com/od/css/f/blcssfaqimportn.htm

score 3 · Accepted Answer

好吧，!important如果你想透支 wp-plugins 默认属性，我认为使用有时是“必须做的工作”。

我今天才使用它，这是完成工作的唯一方法。也许不是做某事的好方法，但有时是唯一的方法。

score 0 · Accepted Answer

问题!important在于，CSS在所有情况下，您都必须尽量避免深度选择（更优先），因为将来您或其他人（通常用于大型项目）将需要在不更改原始样式的情况下覆盖这些样式，然后再更改这个样式这样做的自由是有限的。他也需要使用!important更深的选择器。

score -1 · Accepted Answer

!important 是一个因素，这可能会使您的代码因被覆盖的东西而无效

这！在这并不意味着逻辑不是，所以在这里它与该代码中的那个令人不安。!important 在计算中经常是一个巨大的事故。

例如，如果你想制作它display: block; 但你已经定义了display: none;：

p {
   display: none;
   display: block !important /*Now overriden*/;
}

<p>Some Paragraph</p>

!important是一个最好避免的关键字，什么时候使用它，它可能是一个有影响力的时间，请点击这个链接看看什么时候使用!important，！important Style Rule - CSS-Tricks

别生气什么

html - 在 CSS 中使用“！important”有什么含义？

9 回答 9

有什么问题!important：