Css覆盖用户界面属性-带或不带!重要

本教程将介绍Css覆盖用户界面属性-带或不带!重要的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

Css覆盖用户界面属性-带或不带!重要 教程 第1张

问题描述

我要覆盖属于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

时才起作用

相关问题:

    为什么图标填充只能使用!important--文本填充不需要!important

    我听说使用!important是不好的做法。我应该不惜一切代价避免使用它吗?我还应该怎么重写这些属性/最佳实践是什么?

推荐答案

使用更高的css rule specificity,如:

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

为什么图标填充只能使用!重要信息--文本
不需要填充!重要信息

您的一条规则可以在没有!important的情况下工作,因为它可能已经具有更高的专用性,而另一条则没有。

我听说在用!重要的是不好的练习。我应该避免在以下位置使用它
全部费用吗?我还可以怎么覆盖这些属性/哪些是最好的
实践?

可以使用少量覆盖外部库。但如果可以通过更高的专用性来覆盖,则更好,因为这样会更容易调试CSS冲突/错误。

好了关于Css覆盖用户界面属性-带或不带!重要的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。