Html Bootstrap 活动按钮文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35368383/
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
Bootstrap Active Button Text Color
提问by Daedalus
Sorry to bother you guys again... I've looked everywhere for the answer to this, but I still can't seem to figure it out.
很抱歉再次打扰你们...我到处寻找这个问题的答案，但我似乎仍然无法弄清楚。
I need to change the text color of the active button in Bootstrap. Basically when you click on one of the buttons it will go from being white to some sort of green color, and I want to change that color. Does anyone have any ideas on how I can do this?
我需要更改 Bootstrap 中活动按钮的文本颜色。基本上，当您单击其中一个按钮时，它会从白色变为某种绿色，我想更改该颜色。有没有人对我如何做到这一点有任何想法？
I've tried this in CSS:
我在 CSS 中试过这个：
.button:focus, .button.active, .button.active:focus {
color: white !important;
}
However, that didn't work.
然而，这并没有奏效。
(And can someone tell me how I can just put code in without the "run code" but it still colors it properly?)
（有人可以告诉我如何在没有“运行代码”的情况下输入代码，但它仍然可以正确着色？）
Here's my code:
这是我的代码：
HTML:
HTML：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<html lang="en">
<div class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="dropdowns">
<a class="navbar-brand" id="brand">Traders: </a>
<li class="dropdown">
<a class="dropdown-toggle" aria-expanded="false">General <span class="caret"></span></a>
<ul class="dropdown-menu pull-left" role="menu">
<li><a href="#medical">Medical</a></li>
<li><a href="#utility">Utility</a></li>
<li><a href="#supplies">Supplies</a></li>
<li><a href="#banker">Banker</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" aria-expanded="false">Vehicles <span class="caret"></span></a>
<ul class="dropdown-menu pull-left" role="menu">
<li><a href="#aircraft">Aircraft </a></li>
<li><a href="#vehicle">Vehicle </a></li>
</ul>
</li>
<li class="button"><a href="#blackmarket">Black Market</a></li>
<li class="button"><a href="#wholesaler">Wholesaler</a></li>
<li class="button"><a href="#hero">Hero</a></li>
<li class="button"><a href="#bandit">Bandit</a></li>
</ul>
</div>
</div>
<body></body>
</html>CSS:
CSS：
@media {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.navbar-custom {
color: #262626;
background-color: #262626;
}
.button:hover a{
color: white !important;
}
.navbar-default {
color: #262626;
background-color: #262626;
border-top: 4px solid red;
}
.navbar-default .navbar-brand:hover {
color: white;
}
.dropdown:hover a{
color: white !important;
}
.dropdown-menu > li > a:hover {
background-color: #3d3d3d;
}
}
body {
background-color: black;
}
#navbar {
width: 100%;
}回答by Simply Me
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
CSS 有不同的伪选择器，你可以通过它来实现这样的效果。在您的情况下，您可以使用
:active: if you want background color only when the button is clicked and don't want to persist.
:active：如果您只需要单击按钮时的背景颜色并且不想保留。
:focus: if you want background color untill the focus is on the button.
:focus：如果您想要背景颜色，直到焦点位于按钮上。
http://jsfiddle.net/zakCa/1017/
http://jsfiddle.net/zakCa/1017/
.button:focus
{
font-size: 13px;
color:orange;
}
回答by BuddhistBeast
Depending on which button you are attempting to restyle, you can override the property with a few lines of CSS. The following is some example code:
根据您尝试重新设置样式的按钮，您可以使用几行 CSS 覆盖该属性。下面是一些示例代码：
HTML
HTML
<button class="btn-success btn">
Change My Color
</button>
CSS
CSS
.btn-success:active,
.btn-success.active {
color: blue !important;
}
This works by overriding the default CSS that Bootstrap employs.
这是通过覆盖 Bootstrap 使用的默认 CSS 来实现的。
