为平面UI样式重写CSS

override CSS for a flat UI style

本文关键字：重写 CSS 样式 UI 平面      更新时间：2023-09-26

我必须重写一个CSS类的背景色，从#1abc9c到steelgreen。

我的html控件是 
<select id="Users" title="App. Users" data-toggle="select" class="form-control select select-primary"></select>

flat-ui.min.js中的原始版本

.select2-drop .select2-highlighted > .select2-result-label {
        color: #fff;
        background: #1abc9c;
    }

我试图覆盖背景色为，

$(".select2-drop").css('background', 'steelblue !important');
$(".select2-highlighted").css('background', 'steelblue !important');
$(".select2-result-label").css('background', 'steelblue !important');
$(".select2-drop .select2-highlighted > .select2-result-label").css('background', 'steelblue !important');

他们都没有算出来。我也试过删除!important，但没有运气。

Pl。让我知道我错过了什么!

创建一个新的颜色类:

.select2-drop .select2-highlighted > .select2-result-label.newcolorclass{ color: new_color;}

用你想要的填充new_color

将所有select2-result-label类更改为新颜色:

var j = document.querySelectorAll('.select2-result-label');
for (var i=0;i<j.length;i++){
    j[i].className = j[i].className.replace('select2-result-label','select2-result-label newcolorclass');
}

将所有select2-result-label类重置为原始颜色:

var j = document.querySelectorAll('.newcolorclass');
for (var i=0;i<j.length;i++){
    j[i].className = j[i].className.replace('newcolorclass','');
}

您是否尝试使用background-color: steelblue !important;而不是background: steelblue !important; ?

background CSS属性是一个速记属性，允许您在一个声明中设置多个与背景相关的属性。因为background-color是一个更具体的CSS属性，加上!important声明，你应该有更好的运气覆盖颜色。

如果你仍然没有运气，我建议在web浏览器中使用开发工具(Chrome是我的首选，但FF和IE11都有不错的)来验证真正设置控件背景颜色的CSS规则，并可能了解为什么你的覆盖没有被使用。过去，当我试图重写框架样式时，我一直被CSS优先级所困扰，开发工具帮助我跟踪为什么遵循特定规则而不遵循其他规则。

另外，我同意@jamie-buttons-coulter的观点，除非有特殊的原因需要使用jQuery/JavaScript重写，否则你应该使用CSS(在本地样式块或导入的CSS文件中，无论哪个与项目的其余部分一致)来实现它。

相关文章：