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

Question

我在网站上工作了几个月，很多时候我一直在尝试编辑某些内容，我必须使用!important，例如 ：

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

以使其按预期显示。这是不好的做法吗？或者!important命令可以使用吗？这会导致任何不希望的事情进一步发生吗？

Answer 1

是的，我会说你使用!important的例子是不好的做法，而且它很可能会导致不受欢迎的影响。这并不意味着它永远不会被使用。

!important：

出了什么问题 当浏览器决定CSS如何影响页面时，

Specificity是工作中的主要力量之一。选择器越具体，就越重要。这通常与所选元素出现的频率一致。例如：

  

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

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

但是，

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

  

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

然后color属性的重要性高于font-size。实际上，颜色比button#buyNow选择器中的颜色更重要，而不是font-size（仍然由常规ID与类特异性控制）。

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

这意味着两件事：

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

这不仅使您的样式表难以维护和调试，而且还会启动滚雪球效果。一个!important导致另一个覆盖它，另一个覆盖它，等等。它几乎从不与一个人呆在一起。即使一个!important可以是一个有用的短期解决方案，但从长远来看，它会再次让你陷入困境。

什么时候可以使用：

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

这是!important首先发明的内容：为用户提供覆盖网站样式的方法。它被屏幕阅读器，广告拦截器等辅助功能工具大量使用。

• 覆盖第三方代码＆amp;内联样式。

一般来说，我会说这是代码嗅觉的情况，但有时候你别无选择。作为一名开发人员，你应该尽可能多地控制你的代码，但是有些情况下，你的双手被束缚，你只需要处理现有的任何东西。谨慎使用!important。

• 公用事业类

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

结论

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

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

Answer 2

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

• 即使选择器具有较低的特异性和较低的水平，它现在胜过更高的特异性选择器
• 如果还有更多的语句通常会覆盖那个语句，它就不再覆盖重要的语句

大多数情况下，!important可以避免，因为选择器的特殊性处理哪一个生效，这是级联样式的想法。但是，有些情况（不能完全记住确切的情况）特殊性不合逻辑，我必须在声明中强制!important。

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

• 阻止用户使用自定义样式表（现在无法覆盖标记为重要的规则），这会打破某些人的辅助功能
• 使代码更难以阅读，因为思维通常非常容易具有特异性，但记住!important是什么使其更难阅读

Answer 3

我认为重要的是我们再次触及这一点，在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，请确保你能让用户关闭那个风格（我不是说通过网络浏览器的内部'开/关'开关）。为了天堂，不使它成为默认。

广告

人们越来越少使用时尚的广告删除，所以我不认为保护广告！重要确实是一个问题。它会让一些人试图自定义您的网站。

Answer 4

这个问题有点晚了，但它说＆＃34; 无论应用什么样的其他样式，忽略它们并使用这个＆＃34;。您可能会发现! infront（!important）有点令人困惑，因为这是javascript中的not运算符，但在css中它被称为分隔符令牌，只是说优先级。这是一个例子。

没有!important ：

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

输出 RED

底层属性 !important （同一个）

.set-color{
  color: blue;
 }

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

输出 RED （反正会是红色的）

顶部属性 !important （同一个）

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

.set-color{
  color: red;
 }

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

Answer 5

我不建议你使用它，除非它是必需的，有时可能就是你的情况，因为你正在研究一个现有的项目。 但是尽量远离它并使用尽可能少的东西。

问题是如果你使用太多它们，那么可能会无意中覆盖另一个。你的代码也不那么清晰，任何追随你来维持这一点的人都会撕裂他/她的头发，因为每次你在CSS中做某些事情时，试图找到它都很重要。

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

Answer 6

对我来说，使用!important是一种糟糕的CSS练习。它破坏了应用css规则的自然流程，其中属性从上到下应用。使用!important，该属性现在将优先考虑最新的重要值。

就像在脚本中使用goto关键字一样。虽然它是完全合法的，但它仍然是最好的避免。

Answer 7

嗯，我认为有时使用!important＆＃34;必须做好工作＆＃34;如果你想透支wp-plugins默认属性。

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

Answer 8

！重要是一个因素，这可能会使代码中的东西被覆盖

  

的！这并不意味着不符合逻辑要求，因此在此代码中它对此感到不安。重要！在计算中常常是一个巨大的事故。

例如，如果要制作display: block;  但是您已经定义了display: none;：

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

<p>Some Paragraph</p>

  

!important是最好的避免关键字，何时使用它，可能是一个有影响的时间，请单击此链接以查看何时使用!important，!important Style Rule - CSS-Tricks

没有烦恼

Answer 9

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