我需要样式的nav-制表符的id。当它被放在html中引导和css加载之间时，它是工作的，但是当移动到base.css时，只有一些代码工作(第一组规则)。请告诉我该怎么做才能使所有的规则都适用:
HTML
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/base.css" />
<title>Exemplary CSS error</title>
</head>
<body>
<div class ="row" style = "margin-top: 20px; margin-left: 20px">
<ul class="nav nav-tabs" id="timespan-menu">
<li class="nav-item">
<a class="nav-link active" href="#daily">Daily</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#weekly">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#monthly">Monthly</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#timespan-menu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: #CBCBCB;
border-bottom: 2px solid #343a40;
}
#timespan-menu .nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
#timespan-menu .nav-tabs > li > a {
font-size: 13px;
color: #6c757d;
}
这是因为在你的CSS你的第二个和第三个规则被应用到#timestamp-menu元素的子元素有类.nav-tabs，而在你的标记#timespan-menu元素有.nav-tabs类本身。
如果你只是删除#timespan-menu和.nav-tabs之间的空格，它可以工作，例如:
#timespan-menu.nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
.nav-tabs类。