如何提升Bootstrap 4导航栏中导航项的不透明度？

问题场景 #

使用Bootstrap 4搭建导航栏，背景设为深蓝色#005C90，添加navbar-dark类后移动端汉堡图标正常显示，但导航栏内的文字链接始终呈半透明状态，难以阅读；仅navbar-brand完全不透明。尝试多种标签、类组合调整颜色及不透明度均无效。

导航栏HTML代码 #

<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
    <a class="navbar-brand" href="#">Brand</a>

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Nav Link 1</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Nav Link 2</a>
                </li>

            </ul>
        </div>
        </nav>

自定义CSS代码（原） #

nav {
    background-color: #005C90;
}

nav.navbar {
    color: #F9FEFF;
}

.navbar-brand {
    font-size: 16pt;
}

.nav-item .nav-link{
    font-size: 14pt;
}

问题原因 #

Bootstrap 4的navbar-dark类内置了对.nav-link的样式规则，默认使用带透明度的RGBA颜色，且该选择器优先级高于自定义的.nav-item .nav-link，导致自定义颜色设置被覆盖。

解决方案 #

使用与Bootstrap内置规则优先级一致的选择器，直接覆盖navbar-dark下的.nav-link样式，确保文字完全不透明：

nav {
    background-color: #005C90;
}

.navbar-brand {
    font-size: 16pt;
}

.nav-item .nav-link{
    font-size: 14pt;
}

/* 覆盖navbar-dark下的nav-link默认半透明样式 */
.navbar-dark .navbar-nav .nav-link {
    color: #F9FEFF;
    /* 若仍存在透明度问题，强制设置不透明度为1 */
    opacity: 1;
}

说明 #

• 将自定义样式放在Bootstrap官方CSS文件之后加载，确保能成功覆盖默认规则。
• 若添加color后仍有半透明问题，补充opacity: 1可强制取消透明度设置。

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