Html 为什么嵌套在ID中的class元素不'；是否覆盖其他css文件中的类元素？_Html_Css

Html 为什么嵌套在ID中的class元素不'；是否覆盖其他css文件中的类元素？

html css

Html 为什么嵌套在ID中的class元素不'；是否覆盖其他css文件中的类元素？,html,css,Html,Css,我有个问题。为什么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="

我有个问题。为什么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>

style.css

.navbar-default {
color: black;
}

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

.navbar-default {
color: white;
}

如果我按以下方式更改代码，有什么有趣的地方：

style.css

.navbar-default {
color: black;
}

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

.navbar-default {
color: white;
}

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

替换这一行：

#main-nav .navbar-default

为此：

#main-nav.navbar-default

主导航id

#主导航

与导航栏默认类

位于同一元素上。导航栏默认

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

#main-nav.navbar-default {
  // your code
}

您在style.css文件中使用了，这意味着您的css正在查找ID为

#main nav

的元素的后代，该元素的类为

。当您真正尝试选择的是ID为#main nav
的元素时，该元素的类也为。navbar default
，因此，要解决您的问题，只需删除子体选择器（即空格），即可：
#main-nav.navbar-default

您可能还想继续阅读。
好的，这里的主要问题是您使用的选择器
您的选择器
#main-nav .navbar-default {
color: white;
}

这意味着它为具有类的元素设置白色。导航栏默认值以及父级#主导航
但是在您的例子中，.navbar默认值本身的id#main nav不是它的父项。这就是为什么选择器没有按照您的要求工作
您需要按如下方式更改代码才能工作
  #main-nav.navbar-default {
    color: white;
    }

这是因为CSS中的样式优先级，您可以在这里了解更多细节：不，这是因为选择器一开始就不匹配。