Question

在构造一个Angular指令来包装一个bootstrap select时，我遇到了一个问题，其中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;
  ...
}

我的目标是将左侧的填充增加到50px（我正在构建一棵树）。所以我的选择是：

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

或者像这样简单地增加特异性：

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

普遍接受的建议是避免!important，但使用!important与高特异性的优缺点是什么？代码已经大大简化，可以作为一个问题。

Answer 1

阅读this chart关于CSS特异性的内容。 Estelle（作者）将!important比作原子弹方法。它很苛刻，只能作为最后的手段使用。

您希望尽力将CSS保持在图表的左上角，即您的第二个示例更好。

最佳做法是保持选择器数量<= 3。

Answer 2

important被另一个important覆盖，因此如果需要多次覆盖，最终可能会充满important声明并使css样式混乱

另一方面，特异性被另一种特异性（等于或更具体）所覆盖，通常在需要时更容易被覆盖，更少杂乱

建议使用特异性，但使用important有其优点（例如，当不能使用特异性时，或者当非特定的非特定声明必须保留某些样式不被覆盖时）

使用！important与高特异性来覆盖元素的样式有哪些优点/缺点？

2 个答案: