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

Answer 2

当你看一下bootstrap.css（在你做之前设置这些值的文件）时，你会看到颜色设置为.nav-pills＆gt; li>一个

let functional = {
    flatten (array) {
        if (Array.isArray(array)) {
            return Array.prototype.concat(...array.map(this.flatten, this));
        }

        return array;
    }
};

functional.flatten([0, [1, 2], [[3, [4]]]]); // 0, 1, 2, 3, 4

因此，如果将颜色设置为.nav，则会被.nav-pills类的样式声明覆盖。

如果您要将代码更改为

.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

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

Answer 4

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

您将在引导程序中覆盖类nav，最好使您拥有自己的类，以便在特定的class属性中拥有自己的控件。链接标记（a）具有css颜色属性，不能仅使用list标记覆盖，因为文本位于链接标记（a）内。

使用Bootstrap改变CSS中的文本颜色（导航丸）

4 个答案: