我无法预见!important 会阻碍性能，无论如何都不会。但是，如果您的 CSS 中充满了!important，则表明您已经过度限定选择器并且过于具体，并且您已经用完了父母或限定符来增加特异性。因此，您的 CSS 会变得臃肿（将影响性能）并且难以维护。
如果您想编写高效的 CSS，那么您希望 仅 尽可能具体，并编写 modular CSS。建议不要使用 ID（带有哈希）、链接选择器或限定选择器。
在 CSS 中以 # 为前缀的 ID 非常具体，以至于 255 classes won't override an id（小提琴：@Faust）。 ID 也有更深层次的路由问题，它们必须是唯一的，这意味着您不能将它们重复用于重复样式，因此您最终会编写具有重复样式的线性 css。这样做的影响会因项目而异，具体取决于规模，但可维护性将受到极大影响，在极端情况下，性能也会受到影响。
如何在没有!important、链接、限定或 ID（即 #）的情况下添加特异性
HTML
<div class="eg1-foo">
<p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
<p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
<p class="eg3-foo">foobar</p>
</div>
CSS
.eg1-foo {
color: blue;
}
.eg1-bar {
color: red;
}
[id='eg2-foo'] {
color: blue;
}
[id='eg2-bar'] {
color: red;
}
.eg3-foo {
color: blue;
}
.eg3-foo.eg3-foo {
color: red;
}
JSFiddle
好的，那它是如何工作的？
第一个和第二个例子的工作方式相同，第一个实际上是一个类，第二个是属性选择器。类和属性选择器具有相同的特性。 .eg1/2-bar 不会从 .eg1/2-foo 继承其颜色，因为它有自己的规则。
第三个示例看起来像是限定或链接选择器，但两者都不是。链接是当您在选择器前面加上父母、祖先等时；这增加了特异性。限定是类似的，但你定义了选择器应用到的元素。排位赛：ul.class 和链接：ul .class
我不确定你会如何称呼这种技术，但这种行为是故意的，并且是 documented by W3C
允许重复出现相同的简单选择器，并且
确实增加特异性。
当两条规则的特异性相同时会发生什么？
作为@BoltClock pointed out，如果有多个 !important 声明，那么
规范规定最具体的应该优先。
在下面的示例中，.foo 和 .bar 具有相同的特异性，因此行为回退到 CSS 的级联性质，即 CSS 中声明的最后一条规则声明优先级，即 .foo。
HTML
<div>
<p class="foo bar">foobar</p>
</div>
CSS
.bar {
color: blue !important;
}
.foo {
color: red !important;
}
JSFiddle