更改bootstrap导航栏右侧项目选择的颜色

Question

我正在为我的项目使用bootstrap，我用自己的CSS文件做了一些mofigication。 但是我需要更改bootstrap导航栏右侧项目选择的颜色。 无论我怎么努力，都希望用我的CSS文件进行更改

 .navbar-static-top{ background-color: #3498db; } .navbar-brand { font-family: 'Lato', sans-serif; color:white; font-size: 190%; } body { font-size: 9px; } table-hover{ background-color: #FFF; } thead th { color: #FFF; text-align: Left; background-color: #3498db; font-size: 11px; } tbody td { height: 20px; padding: px px; font-size: 11px; text-align: right; } .vertical-center { background-color: #FFF; } .input-sm { font-size: 12px; color: black; } input[readonly] { background-color: #fff; /* any other styles */ } .nav li{ padding-right:10px; font-size: 120%; color: #FFF; } .nav.navbar-nav.navbar-right li a { color: #FFF; font-size: 120%; } .input-sm { height: 25px; padding: px px; font-size: 12px; } #submitbtn{ align: center; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; } 

 <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Leave Application</a> <ul class="nav navbar-nav"> </ul> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> </ul> <ul class="nav navbar-nav navbar-right"> <li ><a href="sessionstart.php">My Leaves</a></li> <li class="active"><a href="request.php">Application</a></li> </ul> </div> </nav> 

这是我的网站当前在浏览器链接中出现的示例图像

我希望将此灰色更改为白色，并为所选项目添加黑色文本。 我怎样才能做到这一点 ？

Answer 1

这可能是链接你的外部css文件和bootstrap文件的问题

你需要这样的地方

以便浏览器从文件中读取最后一次css更新。

Answer 2

现在，试试吧。 只需在CSS中添加以下代码即可。

.navbar-default .navbar-nav > .active > a {
    background: #000000;
    color: white;
}

Answer 3

当您提供代码时，它正在使用codepen。

我认为，问题是在HTML页面中没有链接的css文件。

Answer 4

请试试这个：

nav.navbar .navbar-collapse ul.navbar-right li.active a {
  color: #000;
  background: #fff;
}

Answer 5

首先确保你在bootstrap之后加载你的自定义css，否则它不会覆盖它。

其次要确保你的css规则指向DOM元素与bootstrap完全相同或更具体。

我个人在父节点前面加上我自己的id或类，并在我的css中引用它。 这保证了我总是使用更具体的css声明然后bootstrap。

但如果它对你没有意义，你可以简单地使用！在你的css比例之后重要，但我建议不惜一切代价避免它，除非你确切地知道没有别的办法