以及以下 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 代码中，期望通过 ID #timespan-menu 来定制 nav-tabs 中链接的样式。但是，后两条规则可能无法生效。这是因为选择器 #timespan-menu .nav-tabs > li.active > a 和 #timespan-menu .nav-tabs > li > a 寻找的是 #timespan-menu 元素内部，且拥有 .nav-tabs 类的子元素。而实际上，.nav-tabs 类直接附加在了 #timespan-menu 元素本身。
解决方案
要解决这个问题，需要调整 CSS 选择器，使其能够正确匹配到目标元素。
方法一：修改选择器层级关系
将选择器中的空格移除，直接将 ID 和类名连接起来，表示 #timespan-menu 元素本身就拥有 .nav-tabs 类：
#timespan-menu.nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
#timespan-menu.nav-tabs > li > a {
font-size: 13px;
color: #6c757d;
}方法二：简化选择器
由于已经使用了 ID 选择器，可以省略 .nav-tabs 类，简化选择器，提高代码可读性：
#timespan-menu > li.active > a {
font-size: 13px;
color: #212529;
}
#timespan-menu > li > a {
font-size: 13px;
color: #6c757d;
}更进一步：针对特定情况的优化
如果希望所有 nav-tabs 都应用相同的样式，可以考虑直接使用 .nav-tabs 类进行样式定义，避免使用 ID 选择器，提高代码的复用性。当然，这取决于具体的项目需求。
注意事项
- 确保 CSS 文件加载顺序正确，自定义样式文件应该在 Bootstrap 样式文件之后加载，以便覆盖默认样式。
- 使用开发者工具（如 Chrome DevTools）检查元素的样式，可以帮助你快速定位问题所在。
- 避免过度使用 ID 选择器，尽量使用类选择器，提高代码的可维护性和复用性。
总结
在 Bootstrap 项目中自定义 nav-tabs 样式时，需要仔细检查 CSS 选择器的层级关系，确保选择器能够正确匹配到目标元素。通过合理调整选择器，可以有效地解决样式失效问题，并编写出更简洁、易于维护的 CSS 代码。记住，理解 CSS 选择器的优先级和作用域是解决此类问题的关键。
