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

这里的问题是相互竞争的，同等特异性的样式声明之一。

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

<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/

如何更改颜色：在脚本中访问

1 个答案: