Bootstrap 5中如何正确覆盖更具体的CSS padding规则？

原因拆解 #

1. 选择器特异性不足：你最初写的.nav-link选择器，特异性低于Bootstrap自带的.navbar-nav .nav-link，自定义样式直接被覆盖。
2. inherit值的误导：你用padding: inherit 2em时，上下内边距会继承父元素（.navbar-nav）的padding值，但Bootstrap默认给.navbar-nav的上下padding为0，导致上下内边距无变化，容易让你误以为整个padding规则没生效。
3. 加载顺序影响：如果自定义CSS在Bootstrap CSS之前引入，即便选择器特异性相同，后加载的Bootstrap样式也会覆盖你的规则——不过你加了!important仍未生效，核心问题还是出在inherit上。

正确解决方式 #

方式一：明确指定padding值（推荐）

放弃inherit，直接设置具体的padding数值，同时使用和Bootstrap相同特异性的选择器，确保自定义CSS在Bootstrap之后加载：

.navbar-nav .nav-link {
    border: 2px solid var(--my-palette-3);
    border-radius: 20px;
    text-align: center;
    padding: 0.5em 2em; /* 将0.5em替换为你需要的上下内边距数值 */
}

方式二：若需保留inherit

先给父元素.navbar-nav设置上下padding，再让子元素继承：

.navbar-nav {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.navbar-nav .nav-link {
    border: 2px solid var(--my-palette-3);
    border-radius: 20px;
    text-align: center;
    padding: inherit 2em;
}

方式三：强制覆盖（不推荐，慎用!important）

如果加载顺序无法调整，可通过!important强制生效，但需确保padding值明确，避免用inherit：

.navbar-nav .nav-link {
    border: 2px solid var(--my-palette-3);
    border-radius: 20px;
    text-align: center;
    padding: 0.5em 2em !important;
}

额外优化思路

给.navbar-nav添加自定义类，提升选择器特异性，避免和Bootstrap默认规则冲突：

<ul class="navbar-nav custom-nav">
  <!-- 导航链接元素 -->
</ul>

.custom-nav .nav-link {
    border: 2px solid var(--my-palette-3);
    border-radius: 20px;
    text-align: center;
    padding: 0.5em 2em;
}

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