Question

很抱歉再次打扰你们......我到处寻找答案，但我似乎无法弄明白。

我需要更改Bootstrap中活动按钮的文本颜色。基本上当你点击其中一个按钮时，它会从白色变成某种绿色，我想改变那种颜色。有没有人对如何做到这一点有任何想法？

我在CSS中试过这个：

.button:focus, .button.active, .button.active:focus {
    color: white !important;
}

但是，这没有用。

（并且有人可以告诉我如何在没有＆＃34;运行代码＆＃34的情况下放入代码;但它仍然可以正确地对其进行着色？）

这是我的代码：

HTML：

＆＃13;

<!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>

＆＃13;

CSS：

＆＃13;

@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%;
}

＆＃13;

Answer 1

CSS有不同的伪选择器，您可以通过它实现此类效果。在您的情况下，您可以使用

:active：如果您只想在单击按钮时想要背景颜色并且不想保留。

:focus：如果您想要背景颜色，请将焦点放在按钮上。

http://jsfiddle.net/zakCa/1017/

.button:focus
{
    font-size: 13px;
    color:orange;
}

Answer 2

根据您尝试重新设置的按钮，您可以使用几行CSS覆盖该属性。以下是一些示例代码：

HTML

<button class="btn-success btn">
  Change My Color
</button>

CSS

.btn-success:active,
.btn-success.active {
  color: blue !important;
}

这可以通过覆盖Bootstrap使用的默认CSS来实现。

Bootstrap活动按钮文本颜色

2 个答案:

HTML

CSS

JSFiddle