使用!important与具有高特异性以覆盖元素样式各有优缺点。

Question

在构建一个Angular指令来包装bootstrap选择器时，我遇到了一个问题，即bootstrap对元素有一个默认样式，而我需要覆盖它。因此，我有3个选项：

• 更改默认值
• 使用!important
• 增加样式的特异性

我不想更改默认值，因为它在其他地方仍然有价值。

这是html代码：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

讨厌的 Bootstrap CSS 是：

ul.dropdown-menu {
  ...
  padding: 5px 0;
  ...
}

我想把左侧的填充增加到50像素（我正在构建一棵树）。所以我的选项是：

custom-directive li {
  padding-left: 50px !important;
}

或者您可以像这样增加特定性：

.dropdown-menu custom-directive li {
  padding-left: 50px;
}

一般建议避免使用!important，但是使用!important和高特异性有什么优缺点呢？代码已经被简化为一个问题。

- nephiw

---

当你使用!important时，它基本上锁定了参数，不能动态更改 - 只能通过硬编码更改。我建议尽可能始终指定路径，以便覆盖默认值，并在将来需要时可以被!important覆盖。 - AWA

这个问题比较开放，但我会这样看：如果你使用!important，它也会影响其他的标签和元素，可能会导致你无意中影响到的其他元素。如果你有选择的话，我会倾向于使用更具体的指定方式，而不是使用!important。 - disinfor

是的，这个问题故意很广泛。但答案应该是具体的。在SO上有几个具体的问题，你总是得到相同的答案。我希望这里能够深入探讨。 - nephiw

你忘记了对待其他开发者最糟糕的事情。你可以将高优先级选择器与 !important 结合使用。!important 标志的优点是它是唯一一个能够真正覆盖在 style 属性和其他 !important 声明中进行的声明的选择器。你应该明智地使用 !important，并尽可能少地使用它。你的选择器应该尽可能具体，但不要过度。这样工作可以使你以后扩展代码成为可能。 - Nico O

@NicoO，我喜欢你的观点，即！important是唯一可以覆盖style属性中声明的内容的东西。 - nephiw

Answer 1

阅读CSS特异性方面的这张图表。作者Estelle将!important比作原子弹式的方法。它是笨重的，只应作为最后的手段使用。

你应该尽力让你的CSS保持在图表的左上角，也就是说，你的第二个例子更好。

最佳实践是保持选择器数量<=3。

- rojobuffalo

---

链接已损坏。 - undefined

谢谢留言，我刚刚更新了链接。 - undefined

Answer 2

important被另一个important覆盖，因此最终会得到很多important声明并且混乱CSS样式表，如果需要许多重写。

另一方面，特定性被另一个特定性（相等或更具体）覆盖，通常更容易被覆盖，不那么混乱。

推荐使用特定性，但使用important也有其优点（例如当无法使用特定性时，或者当某些非常具体的声明必须保留一些样式以免被覆盖）。

- Nikos M.