更改 Bootstrap 下拉项的文本颜色答案

【问题标题】：Changing the text color of a Bootstrap dropdown item更改 Bootstrap 下拉项的文本颜色
【发布时间】：2013-01-20 03:11:43
【问题描述】：

我正在尝试更改下拉菜单元素的颜色。下拉菜单使用以下 HTML：

<div class="btn-group">
    <a class="btn">Confirm</a>
    <a href="#" id="drop_thought" role="button" class="dropdown-toggle btn white-text" data-toggle="dropdown">v</a>
    <ul class="dropdown-menu white-text" id="tools_drop" role="menu" aria- labelledby="drop_thought">
        <li><a class="btn btn-success white-text">Okay</a></li>
        <li><a class="btn btn-warning">Unload</a></li>
        <li><a class="btn btn-danger">Quarantine</a></li>
        <li class="divider"></li>
        <li><a class="btn btn-primary">Permanent</a></li>
    </ul>
</div>

为了便于阅读，我已经删除了 ID。

我做了一个如下的 CSS 类：

.white-text {
    color: #FFFFFF; !important
}

我以为!important 会自动将 Okay 变成白色，但它仍然是黑色的。我在 Chrome 的开发者控制台下用white-text 查看了封闭的<li><a>...</a></li> 元素，似乎.dropdown-menu a 是它继承的类。出于某种原因，我的white-text 被忽略并删除了。

使用以下 CSS，我能够将文本颜色更改为白色，但我在另一个地方使用下拉菜单，所以我不能使用它：

.dropdown-menu a{
    color: #FFFFFF; !important
}

这是根据 Chrome 的继承链：

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a - #ffffff
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] - #ffffff
.btn:hover - #333333
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] - #333333 .dropdown-menu a - #333333
a:hover - #005580
.white-text - #FFFFFF
.btn-success - #ffffff
.btn - #333333
a - #0088cc
.white-text - #FFFFFF
body - #333333

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

分号在 !important 之后，否则它不会包含在该属性中（CSS 不处理空格/返回）。

正确使用：

.dropdown-menu a{
    color: #FFFFFF !important;
}

http://css-tricks.com/when-using-important-is-the-right-choice/

【讨论】：

谢谢。确实很有帮助。