logo标签列表

Bootstrap活动按钮文本颜色

htmlcsstwitter-bootstrap
4

很抱歉再次打扰你们...我已经到处寻找这个答案，但似乎还是无法弄清楚。

我需要改变Bootstrap中活动按钮的文本颜色。基本上，当您单击其中一个按钮时，它将从白色变为某种绿色，我想改变那个颜色。有人有任何想法吗？

我在CSS中尝试了以下内容：

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

然而，那并没有奏效。

(还有谁能告诉我如何只输入代码而不需要使用"run code"来使其正常着色呢？)

这是我的代码：

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：

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

你是否试图覆盖嵌套在菜单中的“锚标签”？ - BuddhistBeast
我正在尝试覆盖活动按钮的文本颜色。当您单击按钮时，它会更改字体颜色，而我希望它保持为白色。 - Daedalus
2个回答
4
CSS有不同的伪选择器，可以实现这样的效果。在您的情况下，您可以使用：
:active：如果您只想在单击按钮时背景颜色，并且不想保持。
:focus：如果您希望背景颜色一直存在于按钮上，直到焦点在按钮上。

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

.button:focus
{
    font-size: 13px;
    color:orange;
}
@Daedalus，已更新答案，并提供了一个可行的示例。 - Simply Me
@Daedalus，从你的代码中我看到这个是有效的。唯一不起作用的情况是当你有嵌套元素或者ul或li元素时。在这种情况下，你应该使用相同的逻辑（color:orange），但是针对li元素。 - Simply Me
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Daedalus
活动按钮正在改变颜色，我可以看到。但是，您有一个需要更改颜色的下拉菜单项。在那里，您不会更改项目的颜色，因为li项目将被更改，因为它是您单击的项目。要为ul执行此操作，只需为li项目添加颜色更改即可。当您单击其中一个时，li元素将更改其颜色。 - Simply Me
好的，我解决了。我添加了：.nav > li > a {color: white !important;}，这样就可以了。谢谢！ - Daedalus
显示剩余3条评论
1

根据您想要重新样式的按钮，您可以使用几行CSS来覆盖属性。以下是一些示例代码：

HTML

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

CSS（层叠样式表）
.btn-success:active,
.btn-success.active {
  color: blue !important;
}

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

JSFiddle（英文网站）

我尝试过了，似乎没用。我已经将所有的代码都更新到了原始帖子中。 - Daedalus
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接