Bootstrap nav-tab自定义CSS部分规则不生效解决方案

• 选择器层级书写错误：你的id="timespan-menu"本身就绑定在带class="nav nav-tabs"的ul元素上，但是CSS里所有带id的选择器都写了#timespan-menu .nav-tabs，多了一层空格分隔的.nav-tabs后代选择器。这个写法的含义是匹配id为timespan-menu的元素内部、带nav-tabs类的后代元素，而该ul内部不存在其他带nav-tabs类的标签，因此这部分选择器完全匹配不到目标元素，对应规则不会生效。
• 你观察到的「第一组规则生效」是错觉：第一组规则是逗号分隔的两个独立选择器，其中后半段.nav-tabs .nav-link.active没有加id前缀，属于全局匹配规则，优先级刚好覆盖Bootstrap默认样式，才让激活标签的背景、边框样式正常显示，实际上带id前缀的前半段选择器同样是失效的。
• 激活状态的选择器不符合Bootstrap 4的DOM结构：原代码写的li.active > a逻辑错误，Bootstrap 4中nav-tabs的active类是直接加在<a class="nav-link">标签上，而非父级li标签，该选择器本身就无法匹配到激活状态的tab。

直接将base.css中的自定义样式替换为以下修正后的代码即可，去掉多余的.nav-tabs层级，补全逗号分隔选择器的id前缀，修正激活状态的匹配逻辑：

#timespan-menu .nav-item.show .nav-link, 
#timespan-menu .nav-link.active {
    background: #CBCBCB;
    border-bottom: 2px solid #343a40;
}

#timespan-menu .nav-link {
    font-size: 13px;
    color: #6c757d;
}

#timespan-menu .nav-link.active {
    font-size: 13px;
    color: #212529;
}

修正后所有样式规则都会精准匹配到id为timespan-menu的导航组件，不会污染全局其他nav-tabs样式，也能正常覆盖Bootstrap默认规则。

内容的提问来源于stack exchange，提问作者Swantewit