使用引导更改CSS中的文本颜色（导航）

Question

我正在使用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类（为什么不只是.nav），以及为什么我必须引用a（链接标记）才能更改文本的颜色。（当我尝试将a（链接标记）更改为li（列表标记）时，文本的颜色没有更改。）

Answer 1

您必须引用“.nav”类，因为这是您试图设置样式的部分。如果你把它放进去。如果不添加-a，那么代码就没有意义，因此不会发生任何事情。

Answer 2

当您查看bootstrap.css（在您查看之前设置这些值的文件）时，您将看到颜色被设置为. nav药丸

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

因此，如果将颜色设置为。导航，这将被导航覆盖。导航类的样式声明。

如果您将代码更改为

.nav {
    color: white !important;
}

您可以覆盖更精确的选择器，但应避免使用！重要信息，请尽可能多地使用，因为这会使代码更难维护。

Answer 3

原因是因为顺次的顺序——对于完全理解的阅读来说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

第一种是锚定。导航剖面和第二个剖面用于中的锚。导航药片。因此，第二个替代第一个，为了让样式替代它，它必须至少与第二个一样具体或更具体。