在CSS中使用“！important”有什么意义？
我一直在网站上工作了几个月，很多时候我一直在尝试编辑一些东西，我必须使用!important ， 例如 ：
div.myDiv { width: 400px !important; }
以便按预期显示。 这是不好的做法？ 或者是!important命令可以使用吗？ 这可能会导致什么事情进一步下行？
是的，我会说你使用!important例子是不好的做法，很可能会导致不良的影响。 这并不意味着它永远不会使用。
有什么不对!important ：
当浏览器决定CSS如何影响页面时， 特定性是工作中的主要力量之一。 select器越具体，就越重要。 这通常与所选元素出现的频率一致。 例如：
button { color: black; } button.highlight { color: blue; font-size: 1.5em; } button#buyNow { color: green; font-size: 2em; }
在这个页面上，所有button都是黑色的。 除了“高亮”类的button，它们是蓝色的。 除了一个ID为“buyNow”的唯一button，这是绿色的。 整个规则（在这种情况下，颜色和字体大小）的重要性由select器的特殊性来pipe理。
!important然而， !important是添加在属性级别，而不是select器级别。 例如，如果我们使用这个规则：
button.highlight { color: blue !important; font-size: 1.5em; }
那么颜色属性将比字体大小更重要。 实际上，颜色比button#buyNowselect器中的颜色更重要，而不是font-size（仍然由常规ID与类专用性控制）。
元素<button class="highlight" id="buyNow">的字体大小为2em ，但是颜色为blue 。
这意味着两件事情：
- select器不能准确地传达其中所有规则的重要性
- 重写蓝色的唯一方法是使用另一个
!important声明，例如在button#buyNowselect器中。
这不仅使您的样式表难以维护和debugging，而且还会造成雪球效应。 一个!important导致另一个重载它，另一个重载这个等等。 它几乎从不停留在一个。 尽pipe一个!important可以成为一个有用的短期解决scheme，但从长远来看，它会回来咬你。
什么时候可以使用：
- 覆盖用户样式表中的样式。
这就是!important是首先发明的：给用户一种覆盖网站样式的手段。 它被诸如屏幕阅读器，广告拦截器等辅助工具所使用。
- 重写第三方代码和内联样式。
通常我会说这是一个代码气味的情况下，但有时你只是没有select。 作为一名开发人员，您应该尽可能多地控制您的代码，但是有时您的手绑在一起，而您只需要处理任何存在的问题。 谨慎使用!important 。
- 实用程序类
许多库和框架都带有实用程序类，如.clearfix ， .error或.clearfix 。 他们有一个单一的目的，往往适用于很less，但非常重要的规则。 （例如，对于.hidden类， display: none ）。 这些应该覆盖元素上的其他任何风格，而且如果你问我的话，这绝对值得!important
结论
使用!important声明往往被认为是不好的做法，因为它的副作用与CSS的核心机制之一混在一起：特异性。 在很多情况下，使用它可能表明糟糕的CSS架构。
在某些情况下，这种情况是可以忍受的，甚至是首选的，但是在使用之前，请确保您仔细检查其中一种情况实际上是否适用于您的情况。
!important力量声明总是适用，做这些事情：
- 即使select器不那么具体和较低的水平，它现在击败更高的特异性select器
- 如果这个语句的进一步发生通常会覆盖那个语句，那么它就不会重写这个重要的语句
大多数情况下， !important是可以避免的，因为select器的特殊性处理哪一个生效，这是级联样式的想法。 然而，在某些情况下（不能完全记住确切的情况），其中的特殊性是不合逻辑的，我不得不强制!important
不使用/避免!important ？
- 阻止用户使用自定义样式表（现在不能覆盖被标记为重要的规则），这会破坏某些人的可访问性
- 使得代码更难以阅读，因为头脑通常很容易理解，但是记住什么是
!important，这使得阅读变得更加困难
我认为重要的是我们再次谈到这一点，在2014年底，当工作草案中增加了更多规则时，不要对用户施加限制。 我用这个小例子来解释这种事情发生的可能情况。 这是从我在网上浏览过的一个真实的网站上获得的，而且我经常看到这一点。
表单文本编辑器字段
你有一个网站，你的网站取决于填写表格和编辑文本。 为了尽量减less眼睛疲劳，你试着用一种你认为每个人都会喜欢的风格去做，而且由于你的用户主要在晚上访问，所以你决定让你的背景颜色变成白色，然后让文本的颜色变成黑色。 这个表单默认是空白的，所以你input文字（这次）以确保它的工作原理：
... background-color: black; /* I forgot important here, but it works fine on its own */ color: white !important; ...
几个月后 ，用户抱怨说白底黑字太紧张，而另一半爱上它，你会怎么做？ 你添加一个使用！重要的自定义主题来覆盖内部样式，这样两个派对都很开心，这就是它被使用的内容：
... background-color: white !important; color: black !important; ...
现在，这里发生了什么？ 你期望什么？ 如果你正确地记住第一组中的重要标签，你会注意到它不起作用，并且可能记得你需要删除！重要标签。 但是你忘了一个..
正确的话，你会在白色背景上看到白色的文字，如果用户试图使用这种新的风格（假设你保留了它），用户将不能再阅读你的网页。
当然，你没有意识到这一点，因为文本框是空的。 你假设它会起作用！ （假设是开发商最大的敌人，那就是傲慢自大的傲慢）。
制定和遵循自我隐含的规则
所以，基本规则应该只在deviseOVERRIDES到一个原始的完整的CSS规则集时才重要。 请记住，它是为了例外，并首先打乱了CSS的自然顺序和含义。 在大多数情况下，您根本不需要使用它。
了解用户如何自定义颜色
随着扩展和像“userstyles.org”这样的网站的存在和它的时尚对手的存在，你运行的风险疏远你的用户使用！重要的标签！ 请记住，时尚不会覆盖他们。
不要限制你的访问者
如果你在风格上使用！important，确保你可以让用户关掉这个风格（而且我不是指通过web浏览器内部的“on / off”开关）。 天啊，不要让它成为默认。
广告
人们越来越less使用时尚的广告去除，所以我不认为保护广告！重要的真的是一个问题在这里。 它只会惹恼试图定制您的网站的人。
这个问题有点晚了，但是它说“ 不pipe别的什么样的风格都适用，忽略它们并使用这个风格 ”。 你可能会发现它有点混乱! infront（ !important ），因为那是javascript中的一个非操作符，但是在css中，它被称为分隔符标记，只是说优先。 下面是一个例子。
没有!important ：
.set-color{ color: blue; } .set-color{ color: red; }
输出RED
!important的底部属性 （相同）
.set-color{ color: blue; } .set-color{ color: red !important; }
输出红色 （反正是红色）
!important属性 （相同）
.set-color{ color: blue !important; } .set-color{ color: red; }
输出蓝色 （表示忽略红色，使用蓝色）
我不会build议你使用它，除非它是一种必需品，有时你可能会遇到这种情况，因为你正在做一个现有的项目。 但是尽量远离它，尽可能less用！
问题是如果你使用太多的话，那么可能会不经意地覆盖另一个。 你的代码也不那么清晰 ，任何追随你的人都会把他/她的头发分开，因为每当你在css中做某些事情时，重要的是find重要的东西，这是一种皇家的痛苦。
检查这个： http : //webdesign.about.com/od/css/f/blcssfaqimportn.htm
对我来说，使用!important是一个不好的CSS练习。 它破坏了应用css规则的自然stream程，其中属性从上到下应用。 !important ，物业现在将优先考虑最新的重要价值。
这就像在脚本中使用goto关键字一样。 虽然它是完全合法的，但它仍然是最好的避免。
那么，我认为使用!important是“必须做的工作”，如果你想透支wp-plugins的默认属性。
我今天才使用它，这是完成我的工作的唯一方法。 也许不是一种好的做法，但有时候是唯一的办法。
