使用“!”的含义是什么?重要的”?

是的，我想说你使用!important的例子是不好的做法，而且很可能会导致后续的不良影响。但这并不意味着它永远都不能使用。

有什么问题吗?

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

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

在本页上，所有按钮都是黑色的。除了类为“highlight”的按钮是蓝色的。除了一个标识为“buyNow”的独特按钮，它是绿色的。整个规则的重要性(在本例中包括颜色和字体大小)由选择器的特异性来管理。

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

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

那么颜色属性的重要性将高于字体大小。事实上，颜色比按钮#buyNow选择器中的颜色更重要，而不是字体大小(仍然由常规ID与类特异性控制)。

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

这意味着两件事:

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

这不仅使样式表更难维护和调试，而且开始了滚雪球效应。一个!重要的会导致另一个去覆盖它，再一个去覆盖那个，等等。它几乎不会只停留在一个人身上。即使一个!重要的可以是一个有用的短期解决方案，从长远来看，它会回来咬你的屁股。

什么时候可以使用:

重写用户样式表中的样式。

这就是!important最初被发明出来的目的:给用户一种覆盖网站样式的方法。它被屏幕阅读器、广告拦截器等辅助工具大量使用。

覆盖第三方代码和行内样式。

一般来说，我会说这是一个代码气味的情况，但有时你只是没有选择。作为一名开发人员，你的目标应该是尽可能多地控制你的代码，但在有些情况下，你的双手受到束缚，你只能使用现有的任何东西。少用!important。

实用程序类

许多库和框架都带有实用程序类，如.hidden、.error或.clearfix。它们只有一个目的，通常适用的规则很少，但却非常重要。(例如，对于.hidden类，display: none)。这些应该覆盖当前元素上的任何其他样式，如果你问我的话，这肯定是重要的。

结论

使用!important声明通常被认为是不好的做法，因为它有副作用，会破坏CSS的核心机制之一:特异性。在许多情况下，使用它可能表明CSS体系结构很差。

在某些情况下，它是可以忍受的，甚至是首选的，但在使用它之前，一定要仔细检查这些情况是否真的适用于您的情况。

2010-09-14 07:31:55

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

2019-06-14 21:33:01

!重要的力量，这句话总是适用，做这些事情:

即使选择器的特异性较低，级别也较低，它现在也优于特异性较高的选择器如果该语句再次出现，通常会覆盖该语句，那么它将不再覆盖该重要语句

大多数情况下，可以避免使用!important，因为选择器的特殊性决定了哪个选择器生效，这就是级联样式的思想。然而，在某些情况下(我不太记得具体是什么情况了)，特异性就不那么符合逻辑了，我不得不在语句中强加!important。

不使用/避免的原因!

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

2010-09-14 07:26:52

我不会建议你使用它，除非它是必要的，有时可能是你的情况，因为你正在处理一个现有的项目。但是尽量远离它，尽量少用!重要的。

问题是，如果你使用太多，那么其中一个可能会无意中覆盖另一个。你的代码也不容易读懂，任何在你之后维护它的人都会把他/她的头发撕成碎片，因为每次你在CSS中做一些事情时都试图找到!important是一种巨大的痛苦。

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

2010-09-14 07:29:48

这个问题有点晚了，但它说的是“不管应用了什么其他风格，忽略它们，使用这个”。你可能会发现它有点困惑!因为在javascript中它不是一个运算符，但在CSS中它被称为一个分隔符令牌，只是表示优先级。这里有一个例子。

没有!重要的是:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

输出红色

!重要的底部属性(相同的)

.set-color{
  color: blue;
 }

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

输出红色(本来是红色的)

!重要的顶部属性(相同的)

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

.set-color{
  color: red;
 }

输出蓝色(表示忽略红色，使用蓝色)

2016-02-29 05:08:52