Question

我一直在阅读有关CSS专用性的文章，并尝试了几种选择，包括

    .navbar-default .navbar-brand {
    color: #ff0000;
}

在bootstrap.css文件中，但是没有运气。我想念什么？

Answer 1

.navbar-default .navbar-brand表示样式仅在置于.navbar-brand下时才会应用于.navbar-default。您的情况下没有这样的父母。

您可以将其更改为.navbar .navbar-brand或在上方的.navbar-default标签中添加nav

Answer 2

如果您使用的是引导程序之类的框架，则可能很难覆盖默认样式。在这种情况下，您有两个选择-

使用ID-

给出要设置任何ID样式的元素。它具有最高的特异性。

#mynav{
    color: #ff0000;
}

使用!important-

虽然不是非常推荐，但使用!important甚至会覆盖id。就您而言-

.navbar-default .navbar-brand {
    color: #ff0000 !important;
}

Answer 3

正如@Yegor Androsov所提到的，没有.navbar-default。因此，您尝试应用的文本颜色将无法正常工作

.navbar-default .navbar-brand {
    color: #ff0000;
}

考虑：


.navbar .navbar-brand{
    color: #ff0000;
}

这将适用于屏幕截图中的代码。但是，如果您更改并包含.navbar-default，请记住要适当地调整您的特异性。

Answer 4

我没有看到navbar-default类的任何元素，所以我认为这是规则不起作用的原因。

这应该更好：

.navbar .navbar-brand {
    color: #ff0000;
}

它应用于所有与.navbar-brand选择器匹配的元素（与{{1}匹配的元素）内的所有与class选择器匹配的元素（这意味着具有navbar-brand属性的元素包含.navbar） }包含class）。

您可以使用navbar方法在浏览器的控制台中对其进行非常快速的测试：

document.querySelectorAll()

每个命令都会返回一个与您的CSS选择器匹配的元素数组，您可以将它们扩展并在鼠标悬停在页面上时在页面上突出显示这些元素。