如何在使用共享布局的单页中移除nav标签的mb-3类或覆盖其样式

你之前的方案失效有两个核心原因：

1. CSS覆盖失效：一是大概率你的自定义CSS引入顺序早于Bootstrap等样式库的CSS，后引入的同优先级样式会覆盖先引入的；二是mb-3作为样式库的工具类默认自带!important标识，且你写的选择器优先级不够高，负边距的写法也没必要。
2. JS修改出现跳动：你等待页面加载完成后才执行类修改操作，此时DOM已经完成首次渲染，样式变更自然会出现视觉跳动。

以下是按优先级从高到低排列的可行方案： #

方案1：模板动态控制类（最优，无副作用） #

如果你的共享布局是用模板引擎（比如Jinja2、Twig、Vue插槽、React props等）渲染的，直接给nav的类留出可覆写的插槽/变量即可：
共享布局模板示例：

<body>
    <header>
        <nav class="{% block nav_mb_class %}mb-3{% endblock %}"></nav>
    </header>
</body>

需要改边距的单独页面直接重写对应块/传参为mb-0即可，完全在服务端/编译阶段完成修改，无任何渲染问题。 #

方案2：高优先级CSS覆盖（次优，改造成本最低） #

首先给需要修改的单独页面的body标签加一个独有的类名，比如no-nav-mb，确保不会影响其他使用共享布局的页面，再写如下CSS，且必须保证这段CSS的引入位置在Bootstrap等样式库的CSS之后：

body.no-nav-mb header nav.mb-3 {
    margin-bottom: 0 !important;
}

选择器叠加了页面独有类和mb-3类，优先级远高于默认的工具类样式，可以稳定覆盖。 #

方案3：同步执行JS修改（仅适用于不能修改模板和全局CSS的场景） #

不要把JS逻辑放在window.onload或DOMContentLoaded回调里，直接把JS代码放在nav标签的紧下方，DOM解析到这段代码时会立即执行修改，不会出现视觉跳动：

<header>
    <nav class="mb-3"></nav>
    <script>
        // 直接选中当前页面的nav元素修改类
        document.querySelector('header nav').classList.replace('mb-3', 'mb-0');
    </script>
</header>

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