使用 Bootstrap (Nav-pills) 更改 CSS 中的文本颜色答案

【问题标题】：Changing Text Color In CSS With Bootstrap (Nav-pills)使用 Bootstrap (Nav-pills) 更改 CSS 中的文本颜色
【发布时间】：2015-10-24 09:00:35
【问题描述】：

当我遇到一个小问题时，我正在使用 bootstrap 制作一个带有 bootstrap 的网站。我试图更改导航栏中文本的颜色（药丸）：

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（列表标签）时，文本的颜色没有改变。）

【问题讨论】：

标签： html css twitter-bootstrap text colors

【解决方案1】：

我想知道为什么在 CSS 中我必须引用 .nav-pills 类（为什么不只是 .nav），以及为什么我必须引用 a（链接标签）才能获得文本的颜色改变。（当我尝试将 a（链接标签）更改为 li（列表标签）时，文本的颜色没有改变。）

您将在引导程序中覆盖类导航，最好让您拥有自己的类，这样您就可以在特定的类属性中拥有自己的控制权。链接标签 (a) 具有不能仅使用列表标签覆盖的 css 颜色属性，因为文本位于链接标签 (a) 内部。

【讨论】：

【解决方案2】：

您必须引用“.nav-pills a”类，因为这是您尝试设置样式的部分。如果你只放 .nav 而不添加 -pills a，那么代码就没有意义，因此什么也不会发生。

【讨论】：

【解决方案3】：

原因是因为优先顺序 - 完整理解请阅读https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。

就你询问的具体样式而言，如果你查看 bootstrap repo，你会看到以下两条规则：

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-pills 中的锚点。因此，第二个覆盖第一个，并且为了让您的样式覆盖它，它必须至少与第二个一样具体或更多。

【讨论】：

【解决方案4】：

当您查看 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，因为这会使您的代码更难维护。

【讨论】：