Html 更改 Bootstrap 下拉项的文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14405398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the text color of a Bootstrap dropdown item
提问by Aaron Reba
I'm trying to change the color of a dropdown menu's elements. The dropdown is made with the following HTML:
我正在尝试更改下拉菜单元素的颜色。下拉列表由以下 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>
I've erased the IDs for easy reading.
为了方便阅读，我已经删除了 ID。
I made a CSS class like the following:
我制作了一个 CSS 类，如下所示：
.white-text {
color: #FFFFFF; !important
}
I thought the !importantwould automatically make the Okay into white, but it's still black. I looked at the enclosed <li><a>...</a></li>element with white-textunder Chrome's developer console and it seems that .dropdown-menu ais the class it's inheriting from. For some reason, my white-textis ignored and has a strike through.
我以为!important会自动将 Okay 变成白色，但它仍然是黑色的。我查看了Chrome 开发人员控制台下的封闭<li><a>...</a></li>元素，white-text它似乎.dropdown-menu a是它继承的类。出于某种原因，我的white-text被忽略并被删除。
Using the following CSS, I was able to change the text color to white, but I'm using dropdowns in another place, so I can't use this:
使用以下 CSS，我能够将文本颜色更改为白色，但我在另一个地方使用下拉菜单，所以我不能使用它：
.dropdown-menu a{
color: #FFFFFF; !important
}
Here's the inheritance chain according to Chrome:
这是根据 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
回答by Jason
The semi-colon goes after the !important, otherwise it won't be included in that property (CSS doesn't deal with white space/returns).
分号跟在 !important 之后，否则它不会包含在该属性中（CSS 不处理空格/返回）。
Correct use:
正确使用：
.dropdown-menu a{
color: #FFFFFF !important;
}
http://css-tricks.com/when-using-important-is-the-right-choice/
http://css-tricks.com/when-using-important-is-the-right-choice/
