Question

我有问题。为什么style.css中的颜色定义不会覆盖嵌套在ID中的颜色：＃main-nav？

HTML

<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="main-nav" class="navbar-default" role="banner">
content
</div>
</body>

bootstrap.css

.navbar-default {
color: black;
}

的style.css

#main-nav .navbar-default {
color: white;
}

有趣的是如果我更改代码如下：

的style.css

.navbar-default {
color: white;
}

颜色参数已更改。有人可以解释一下为什么ID的第一种方式不起作用吗？

Answer 1

替换此行：

#main-nav .navbar-default

有了这个：

#main-nav.navbar-default

Answer 2

您在style.css文件中使用了descendant selector，这意味着您的CSS正在寻找标识为#main-nav的元素的后代，其类别为.navbar-default您真正尝试选择的是ID为#main-nav的元素，其类别为.navbar-default，因此，要解决您的问题，只需删除后代选择器（即空格），即可你：

#main-nav.navbar-default

您可能还想阅读CSS specificity。

Answer 3

主导航标识paths与导航栏默认类paths: { 'A/B/C': 'src/js/a', // and whatever else you'd need... }位于同一元素

因此，要使用CSS选择它，您可以使用

#main-nav

Fiddle

Answer 4

好的，所以这里的主要问题是你正在使用的选择器。

您的选择器

#main-nav .navbar-default {
color: white;
}

这意味着它为具有类 .navbar-default 的元素以及父 #main-nav

设置了白色

但在您的情况下， .navbar-default 本身的ID ＃main-nav 不是其父级。这就是为什么您的选择器不能按照您的要求工作的原因。

您需要按照以下方式更改代码

  #main-nav.navbar-default {
    color: white;
    }

为什么嵌套在ID中的类元素不会覆盖其他css文件中的类元素？

4 个答案: