使用Bootstrap（Nav-pills）在CSS中更改文本顏色

Question

遇到一個小問題時，我正在使用引導程序來創建帶有引導程序的網站。 我正在嘗試更改導航欄中文本的顏色（葯片）：

HTML：

<nav>
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </nav>

CSS：

.nav-pills a{
color:white;
}

（此代碼解決了我的問題，但下面有一些問題。）

我想知道為什么在CSS中我必須引用.nav-pills類（為什么不只是.nav），為什么我必須引用a（鏈接標記）才能更改文本的顏色。 （當我嘗試將a（鏈接標記）更改為li（列表標記）時，文本的顏色沒有改變。）

Answer 1

原因是由於優先順序-要完全理解， 請閱讀https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 。

至於您詢問的特定樣式，如果您查看引導存儲庫，您將看到以下兩個規則：

https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4035

https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4148

第一個用於.nav節中的錨點，第二個用於.nav葯丸中的錨點。 因此，第二個覆蓋第一個，並且為了使您的樣式覆蓋它，它必須至少與第二個相同或更多。

Answer 2

當您查看bootstrap.css（先設置這些值的文件）時，您會看到顏色設置為.nav-pills> li> a

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    color: #fff;
    background-color: #3276b1
}

因此，如果將顏色設置為.nav，則.nav-pills類的樣式聲明將覆蓋此顏色。

如果您將代碼更改為

.nav {
    color: white !important;
}

您將覆蓋更精確的選擇器，但應盡可能避免使用!important因為它會使您的代碼難以維護。

Answer 3

您必須引用“ .nav-pills a”類，因為這是您要設置樣式的部分。 如果您只添加.nav而不添加-pills a，那么代碼將毫無意義，因此將不會發生任何事情。

Answer 4

我想知道為什么在CSS中我必須引用.nav-pills類（為什么不只是.nav），為什么我必須引用a（鏈接標記）才能更改文本的顏色。 （當我嘗試將a（鏈接標記）更改為li（列表標記）時，文本的顏色沒有改變。）

您將在引導程序中覆蓋類nav，最好讓您擁有自己的類，以便在特定的class屬性中擁有自己的控件。 鏈接標簽（a）具有css顏色屬性，該屬性不能僅使用列表標簽覆蓋，因為文本位於鏈接標簽（a）內部。