Question

我必须将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。让我知道我在这里失踪了什么！

Answer 1

创建一个新的颜色类：

.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','');
}

Answer 2

您是否尝试background-color: steelblue !important;而不是background: steelblue !important;？

background CSS属性是一个简写属性，允许您在一个声明中设置多个与背景相关的属性。由于background-color是一个更具体的CSS属性，并且与!important声明相结合，因此您应该更好地覆盖颜色。

如果你仍然没有运气，我建议在网络浏览器中使用开发工具（Chrome是我的首选，但FF和IE11也都有不错的选项）来验证真正设置控件的CSS规则＆＃39; s背景颜色，可能会瞥见为什么没有使用覆盖。在尝试覆盖框架样式时，我曾被CSS优先权所淹没，开发工具帮助我追踪了为什么遵循特定规则而其他规则没有遵循。

另外，我同意@jamie-buttons-coulter，除非有特定的理由使用jQuery / JavaScript进行覆盖，否则你应该使用CSS（在本地样式块或导入的css文件中）实现它，以与项目其余部分一致的方式）。

覆盖平面UI样式的CSS

2 个答案: