更改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比例之后重要，但我建議不惜一切代價避免它，除非你確切地知道沒有別的辦法