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

Question

当我使用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 (列表标记)时，文本的颜色没有改变。)

Answer 1

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

至于您询问的特定样式，如果您查看bootstrap代码库，您将看到以下两条规则：

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-.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，那么代码就不会有任何意义，因此什么都不会发生。