如何永久禁用导航栏链接的focus聚焦效果？

我需要禁用导航栏中链接的focus聚焦行为，当前使用Bootstrap 5.3.0-alpha1，导航链接的HTML结构如下：

<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
  <li><a href="#" class="nav-link px-2 active">First</a></li>
  <li><a href="#" class="nav-link px-2">Second</a></li>
</ul>

我尝试添加了关闭outline的CSS样式，但聚焦时的蓝色高亮效果依然存在：

<style>
  .nav-link {
    color: #888888;
  }
  .nav-link:hover {
    color: black;
  }
  .nav-link:focus {
    outline:none;
  }
  .active {
    color: black;
  }
</style>

我确认问题出在.nav-link:focus选择器上——把outline:none;改为color:red;后，蓝色聚焦效果会变成红色，但我不想通过修改颜色来解决，只想直接禁用聚焦行为。

我已经尝试过以下所有outline写法，均无效：

outline: none;
outline: 0;
outline: 0 !important;
outline: 0 none !important;

附上我设置color: initial和outline: thin dotted;后的完整头部测试代码：

CSS代码 #

.nav-link {
  color: #898989;
}
.nav-link:hover {
  color: black;
}
.nav-link:focus {
  outline: thin dotted;
  text-decoration: none;
  color: initial !important;
}

.active {
  color: black;
}

HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<header class="p-3 text-bg-light">
<div class="container">
  <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">

    <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
      <li><a href="#" class="nav-link px-2 active">First</a></li>
      <li><a href="#" class="nav-link px-2">Second</a></li>
    </ul>

  </div>
</div>
</header>

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