CSS 覆盖 UI 属性 - 带或不带 !important答案

【问题标题】：CSS overriding UI properties - with or without !importantCSS 覆盖 UI 属性 - 带或不带 !important
【发布时间】：2018-04-23 02:35:32
【问题描述】：

我想覆盖属于react semantic UI 的默认Dropdown 属性

这是我的下拉菜单：

<Dropdown 
    placeholder="User" 
    selection 
    compact 
    options={userOptions}
/>

我的下拉列表中的文本有太多的填充，所以在我的 CSS 中我删除了它：

.default.text {
    font-size: 10px;
    padding: 0;
}

我也去掉了下拉图标的填充：

.dropdown.icon {
    padding: 0 !important;
}

但是，正如您所见，这仅在我使用 !important 时才有效

相关问题：

【问题讨论】：

你不能让你的css选择器更具体吗？通常，浏览器使用最具体的选择器来添加样式。将父类甚至父元素添加到您的选择器。一个小技巧是两次应用相同的类来“非常具体” div.class.class 是一个有效的 CSS 选择器，并且比 div.class 更具体用它，用它

【解决方案1】：

使用更高的css rule specificity，例如：

.somegrandparent .someparent .dropdown.icon {
  padding:0;
}

为什么图标填充只能通过使用！important - 文本填充不需要！重要

您的一条规则在没有!important 的情况下有效，因为它可能已经具有更高的特异性，而另一条则没有。

我听说使用 !important 是不好的做法。我应该避免在所有费用？我如何覆盖这些属性/什么是最好的实践？

"ok" 可以谨慎地覆盖外部库。但是如果可以通过首选的更高特异性覆盖，因为它会更容易调试 css 冲突/错误。

【讨论】：