Jquery 在使用Firefox（在Chrome中工作）时，单击导航栏链接后，焦点状态保持打开状态

我正在尝试使用

Bootstrap

（

3.2

）的经典导航栏创建页面内导航

我正在使用

jQuery

实现滚动到功能，并将

active

类删除并添加到正确的选项卡中

问题
在使用Firefox时，单击导航栏链接时，焦点状态为“开”（适用于Chrome）

这是正常活动状态下的外观：

这就是我点击项目后的样子（看起来应该和上一个一样，但焦点状态似乎保持打开状态）：

我在两种解决方案中重现了这种行为：

1） 更改焦点样式：

.my-navbar .navbar-brand:focus {
  color: whitesmoke;
  background-color: #7d93f3;
  text-shadow: 1em;
}

2） 加上！对于活动类样式很重要

它将停止在焦点上覆盖颜色和背景色

.my-navbar .navbar-nav > li.active > a {
  background-color: whitesmoke !important;
  color: #4e6cef !important;
}

---

我认为

：焦点
覆盖你的
。活动的
@AndreasFurster为什么会发生这种情况？在我的SCSS中，它们具有相同的特异性。这解决了问题，但似乎是一个临时解决方案。我得到的行为是预期的吗？我已经在指定的元素上设置了这两个规则，并在
：hover
、
：active
和
：focus
状态下覆盖它们。（因此，前面的解决方案要好一点）