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

I've been working on a website for a few months, and a lot of times when I've been trying to edit something, I have to use !important, for example:

我在一个网站上工作了几个月，很多时候当我尝试编辑一些东西的时候，我必须使用!

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

in order to make it display as expected. Is this bad practice? Or is the !important command okay to use? Can this cause anything undesired further down the line?

以使它像预期的那样显示。这是不好的做法吗?还是重要的命令可以使用?这是否会在接下来的时间里产生任何不希望的结果呢?

7 个解决方案

#1

Yes, I'd say your example of using !important is bad practice, and it's very likely it would cause undesired effects further down the line. That doesn't mean it's never okay to use though.

是的，我想说的是你使用的例子!重要的是不好的实践，很有可能会在以后的过程中造成不希望的影响。但这并不意味着它永远都不能使用。

What's wrong with !important:

Specificity is one of the main forces at work when the browser decides how CSS affects the page. The more specific a selector is, the more importance is added to it. This usually coincides with how often the selected element occurs. For example:

当浏览器决定CSS如何影响页面时，特性是主要的力量之一。选择器越具体，添加的重要性就越大。这通常与所选元素发生的频率一致。例如:

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

On this page, all buttons are black. Except the buttons with the class "highlight", which are blue. Except that one unique button with the ID "buyNow", which is green. The importance of the entire rule (both the color and font-size in this case) is managed by the specificity of the selector.

在这一页上，所有的按钮都是黑色的。除了“突出显示”类的按钮，它们是蓝色的。除了ID为“buyNow”的唯一按钮，它是绿色的。整个规则(在本例中包括颜色和字体大小)的重要性由选择器的特殊性决定。

!important, however, is added at a property level, not a selector level. If, for instance, we used this rule:

然而，重要的是添加到属性级别，而不是选择器级别。例如，如果我们使用这个规则:

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

then the color property would have a higher importance than the font-size. In fact, the color is more important than the color in the button#buyNow selector, as opposed to the font-size (which is still governed by the regular ID vs class specificity).

然后，颜色属性将比字体大小更重要。事实上，颜色比#buyNow选择器中的颜色更重要，而不是字体大小(它仍然受常规ID和类特异性的控制)。

An element <button class="highlight" id="buyNow"> would have a font-size of 2em, but a color blue.

元素的字体大小为2em，但颜色为蓝色。

This means two things:

这意味着两件事:

1. The selector does not accurately convey the importance of all the rules inside it
2. 选择器不能准确地传达其中所有规则的重要性
3. The only way to override the color blue is to use another !important declaration, for example in the button#buyNow selector.
4. 重写蓝色的唯一方法是使用另一个!重要声明，例如在按钮#buyNow选择器中。

This not only makes your stylesheets a lot harder to maintain and debug, it starts a snowball effect. One !important leads to another to override it, to yet another to override that, et cetera. It almost never stays with just one. Even though one !important can be a useful short-term solution, it will come back to bite you in the ass in the long run.

这不仅使样式表更难维护和调试，还会引发滚雪球效应。一个，重要导致另一个去覆盖它，另一个去覆盖它，等等。它几乎不会只停留在一个。虽然重要的是一个有用的短期解决方案，但从长远来看，它还是会反咬你一口。

When is it okay to use:

• Overriding styles in a user stylesheet.
• 在用户样式表中重写样式。

This is what !important was invented for in the first place: to give the user a means to override website styles. It's used a lot by accessibility tools like screen readers, ad blockers, and more.

这是最重要的发明，首先是为了给用户一个覆盖网站风格的手段。它经常被易访问性工具使用，比如屏幕阅读器、广告拦截器等等。

• Overriding 3rd party code & inline styles.
• 重写第三方代码和内联样式。

Generally I'd say this is a case of code smell, but sometimes you just have no option. As a developer, you should aim to have as much control over your code as possible, but there are cases when your hands are tied and you just have to work with whatever is present. Use !important sparingly.

一般来说，我认为这是一种代码味道，但有时你别无选择。作为一名开发人员，您应该尽可能多地控制您的代码，但是在某些情况下，您的双手被束缚，您只需要处理现有的任何东西。使用!重要的很少。

• Utility classes
• 实用程序类

Many libraries and frameworks come with utility classes like .hidden, .error, or .clearfix. They serve a single purpose, and often apply very few, but very important, rules. (display: none for a .hidden class, for example). These should override whatever other styles are currently on the element, and definitely warrant an !important if you ask me.

许多库和框架都带有实用类，如.hidden、.error或.clearfix。它们只为一个目的服务，而且通常很少应用，但非常重要的规则。(显示:例如，隐藏类没有)。这些应该覆盖元素上当前的任何其他样式，如果你问我的话，这绝对是非常重要的。

Conclusion

Using the !important declaration is often considered bad practice because it has side effects that mess with one of CSS's core mechanisms: specificity. In many cases, using it could indicate poor CSS architecture.

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

There are cases in which it's tolerable or even preferred, but make sure you double check that one of those cases actually applies to your situation before using it.

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

#2

!important forces the statement to always apply, doing these things:

!这句话的重要作用是:

• even if the selector is less specific and lower level, it now beats higher specificity selectors
• 即使选择器的特异性更低，它也能打败更高的特异性选择器
• if there are further occurrences of that statement that would normally override that one, it does not override the important statement any more
• 如果该语句进一步出现，通常会覆盖该语句，则不再覆盖该重要语句

Most of the time, !important can be avoided because specificity of selectors handles which one takes effect, which is the idea of cascading styles. However, there are some situations (can't quite remember the exact one) where the specificity isn't that logical and I have to force !important on the statement.

大多数时候，重要的是可以避免的，因为选择器的专一性处理的是效果，这就是层叠样式的思想。然而，在某些情况下(我不太记得确切的情况)，这种特殊性不是那么合乎逻辑的，我必须强制执行!

Reasons not to use/avoid !important?

不使用/避免的理由!重要吗?

• prevents users from using custom stylesheets (which now can't override the rules that are marked as important) which breaks accessibility for some people
• 防止用户使用自定义样式表(现在不能覆盖标记为重要的规则)，这会破坏一些人的可访问性
• makes code more difficult to read because the mind normally takes specificity quite easily, but remembering what is !important makes it harder to read
• 使代码更难阅读，因为大脑通常很容易做出具体的处理，但是记住什么才是最重要的

#3

I think it is important that we touch on this again, here at the end of 2014 when more rules are being added into the working draft, it is so important not to impose restrictions upon your users. I have wrtten this small example to explain a possible scenario in which such a thing takes place. This is taken from a REAL website I have visited on the web, and I see it, sadly, more often than not.

我认为我们有必要再次讨论这个问题，在2014年底，当更多的规则被加入到工作草案中时，不要对用户施加限制是非常重要的。我用这个小例子解释了一个可能发生的场景。这是从我在网络*问过的一个真实的网站上得到的，不幸的是，我经常看到它。

Form Text Editor Fields

You have a website, and your website depends on filling out forms and editing text. To try to minimize eye strain you try to go with a style you think everyone will be okay with, and since your users mainly visit at night, you decide to make your background color to be white, and then make the text color to be black. The form is blank by default, so you type in text (this time) to make sure it works:

你有一个网站，你的网站依赖于填写表格和编辑文本。为了尽量减少眼睛疲劳，你试着用你认为每个人都可以接受的风格，因为你的用户主要是在晚*问，你决定让你的背景颜色为白色，然后让文本颜色为黑色。默认情况下，表单是空的，所以你输入文本(这次)以确保它可以工作:

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

A few months later, users complain that white-on-black is too eye straining but the other half love it, what do you do? you add a custom theme that uses !important to override the internal styles so that BOTH parties are happy, which is what it is SUPPOSED to be used for:

几个月后，用户们抱怨说，白黑相间的眼睛太紧了，而另一半人却喜欢这样，你该怎么办?你添加一个定制的主题，它使用!重要的是覆盖内部样式，这样双方都是快乐的，这是它应该被用来做的:

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

Now, what happens here? What did you expect. If you properly remember the !important tags in the first set, you would have noticed it didn't work and probably remembered that you needed to delete the !important tags off. BUT you forgot one..

现在,这里发生了什么?你期待什么。如果你正确地记住了第一个集合中的!important标记，你就会注意到它不起作用，可能还记得你需要删除!

RIGHT, you get white text on white background, and the user can no longer read your webpage at all if they try to use this new style (assuming you kept it).

在白色背景下，你会看到白色的文字，如果用户试图使用这个新样式(假设你保留了它)，用户就再也不能阅读你的网页了。

Of course, You don't realize this because the textbox is empty. And You ASSUME that it will work! (Assumption is a developer's worst enemy, it's right up there with pride and arrogance).

当然，您没有意识到这一点，因为文本框是空的。而且你认为它会起作用!(假定是开发人员最大的敌人，它就在那里，傲慢自大)。

Make and Follow Self Implied Rules

So, the basic rule should be only use !important when designing OVERRIDES to an original complete set of css rules. Remember that it is meant for exceptions and disturbs the natural order and meaning of css in the first place. In MOST cases you will not need to use it at all.

所以，基本的规则应该是只使用!重要的是在设计覆盖到原始完整的css规则集时。请记住，它是针对异常的，并且首先会扰乱css的自然顺序和含义。在大多数情况下，您根本不需要使用它。

Know How Users Customize Their Colors

With the existence of such tools as extensions and the presence of sites like 'userstyles.org' and it's stylish counterpart, you run the risk of alienating your users by using the !important tag at all! Keep in mind that stylish will not override them.

随着诸如扩展之类的工具的出现，以及“userstyles.org”等网站的出现，而且它也是时尚的对应工具，您可能会因为使用重要的标签而疏远您的用户!记住，时尚不会超越它们。

Never Restrict Your Visitors

If you use !important on a style, make sure you make it possible for the user to turn that style off (and i dont mean via the web browser's internal 'on/off' switch). And for heavens sake don't make it DEFAULT.

如果你使用!在一个样式上很重要，确保你能让用户关闭那个样式(我不是指通过web浏览器的内部“打开/关闭”开关)。看在老天的份上，不要让它违约。

Ads

People are less and less using stylish for ad removal, so I don't think protecting ads with !important really is an issue here. It will just annoy someone trying to customize your site.

人们越来越不喜欢用时尚来去除广告，所以我不认为用保护广告!在这里真的很重要。它只会让那些想要定制你的网站的人生气。

#4

A little late to this question but it's saying "no matter what other styles are applied, ignore them and use this one". You may find it a little confusing with the ! infront (of the !important) because thats a not operator in javascript but in css it's called a delimiter token that just says to take priority. Heres an example.

这个问题有点晚了，但它说“不管应用了什么其他样式，忽略它们并使用它”。你可能会觉得它有点让人困惑!infront(重要的)因为它不是javascript的操作符，但是在css中，它被称为一个分隔符，它只是说要优先考虑。这是一个例子。

---

Without !important:

没有!重要的是:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

outputs RED

输出红色

---

!important on bottom attribute (of same)

!在底部属性上很重要(相同)

.set-color{
  color: blue;
 }

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

outputs RED (would have been red anyways)

输出红色(可能是红色的)

---

!important on top attribute (of same)

!顶部属性(同样)很重要

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

.set-color{
  color: red;
 }

outputs BLUE (says ignore red, use blue)

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

---

#5

I wouldn't advice you to use it unless it's a necessasity, which sometimes might be the case with you, as you're working on an existing project. But try to stay away from it and use as little !important as possible.

我不会建议你使用它，除非它是必需的，有时你也会这样，因为你正在做一个现有的项目。但是尽量远离它，尽量少用!

The problem is if you use too many of them then one might inadvertantly overwrite the other. Your code is also much less legible and anyone who comes after you to maintain this will tear his/her hair apart, as trying to find !important everytime you do something in the css is a royal pain.

问题是如果你使用了太多，其中一个可能会不经意地覆盖另一个。您的代码也不太清晰，任何在您之后维护它的人都会把他/她的头发撕开，就像试图找到一样!

Check this: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

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

#6

For me, using !important is a bad CSS practice. It disrupts the natural flow in applying the css rules where in properties are applied from top to bottom. With !important, the property will now give priority to the latest important value.

对我来说，使用!important是一个糟糕的CSS实践。它破坏了自上至下应用css规则的自然流。有了!重要，该属性将优先于最新的重要值。

It's just like using the goto keyword in scripts. Though its are perfectly legal, it's still best avoided.

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

#7

Well, i think using !important is sometime "must to do job" if you want overdraw wp-plugins default properties.

嗯，我认为如果你想要透支wp插件的默认属性，使用!

I used it just today and it was the only way to finish my job. Maybe is not good way to do something but sometime is the only way to do it.

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