如何更改 a:visited 在脚本中的颜色

Question

我想将滚动时导航栏的文本更改为白色。这适用于下拉菜单，我让它适用于主页按钮。但是，因为它是一个“a”选择器，所以它将它视为一个链接，因此当它被单击（访问）时，它将获得访问的颜色。所以我做了一个.test a:visited {color:inherit;}' 但这也不能解决问题。如果我添加.navbar .test {color:black;}，那么滚动时它就不会变成白色了。有谁知道如何解决这个问题？

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("myTopnav").style.backgroundColor = "rgba(2,2,2,0.5)";
    $('.dropbtn').addClass('whitenavbar');
    $('.test').addClass('whitenavbar');

  } else {
    document.getElementById("myTopnav").style.backgroundColor = "red";
    $('.dropbtn').removeClass('whitenavbar');
    $('.test').removeClass('whitenavbar');
  }

}

.navbar {
  z-index: 1;
  background-color: red;
  top: 16px;
  width: 100%;
  position: fixed;
}

.navbar a {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar .test {
  font-size: 16px;
  text-align: center;
  padding: 25px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 25px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
  text-decoration: none;
}

.whitenavbar {
  color: white;
}

.test a:visited {
  color: inherit;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: rgba(2, 2, 2, 0.2);
  text-decoration: none;
  color: #FFFFFF;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  text-decoration: none;
  color: #000000;
}

.dropdown:hover .dropdown-content {
  display: block;
  text-decoration: none;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="navbar" id="myTopnav">
  <a class="test" href="http://2019.igem.org/Team:TUDelft"><b>Home</b></a>
  <div class="dropdown">
    <button class="dropbtn" onclick="myFunction()">Dropdown
                    <i class="fa fa-caret-down"></i>
                </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

<!-- force scroll -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

这里的问题是具有相同特性的样式声明相互竞争。

给.navbar 中的<a> 元素一个特定的类，例如：

<a class="navbarAnchor">

然后你可以显式地设置样式：

.navbarAnchor {
  color: rgb(255, 255, 255);
}

在各种上下文中，无需参考锚点与其父/祖先元素之间的关系。

如有必要（也可能不是），您可以参考：

  .navbarAnchor,
  .navbarAnchor:link,
  .navbarAnchor:visited,
  .navbarAnchor:hover,
  .navbarAnchor:active {
  color: rgb(255, 255, 255);
}

---

NB 它并不适合所有人，也不适合所有情况，但 BEM 方法（以及 ABEM 等相关方法）是一个非常好的方法驯服 CSS 中的特殊性问题的方法。

在我第一次接触 BEM 之后，我多年来一直忽略它，因为它与我一直以来的工作方式完全相反。

去年年底我又回到了它，并且比以往任何时候都更欣赏它如何刻意关注基于类而不是基于关系的选择器可以通过确保样式表中的几乎每个选择器来极大地简化样式表的维护具有相同的特异性水平。

这是一个很好的起点：

https://css-tricks.com/abem-useful-adaptation-bem/