gpt4 book ai didi

html - 更改 Bootstrap 下拉项的文本颜色

转载 作者:太空狗 更新时间:2023-10-29 14:49:38 25 4
gpt4 key购买 nike

我正在尝试更改下拉菜单元素的颜色。下拉菜单使用以下 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 变成白色,但它仍然是黑色的。我看了随附的<li><a>...</a></li>带有 white-text 的元素在 Chrome 的开发者控制台下,似乎 .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

最佳答案

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

正确使用:

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

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

关于html - 更改 Bootstrap 下拉项的文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14405398/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com