为平面 UI 样式覆盖 CSS

Question

我必须将 CSS class 的背景颜色从 #1abc9c 覆盖为 steelgreen。

我的html控件是

<select id="Users" title="App. Users" data-toggle="select" class="form-control select select-primary"></select>

平原版-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');

None个都算出来了。我也尝试删除 !important 但没有成功。

Pl。让我知道我在这里错过了什么！

Answer 1

创建新颜色class:

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

填写 new_color 任意内容。

将所有 select2-result-label class 更改为新颜色：

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 class 重置为原始颜色：

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 属性是一个 shorthand 属性允许您在一个声明中设置多个与背景相关的属性。由于 background-color 是更具体的 CSS 属性，再加上 !important 声明，您应该更幸运地覆盖颜色。

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

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

为平面 UI 样式覆盖 CSS

override CSS for a flat UI style

javascript

css

overriding