html - OOCSS/modular CSS : Fighting link styles,如何解决？

Question

在我的 CSS 文件中，作为“重置”的一部分，我将所有链接设置为如下样式:

a {
  color: blue;

  &:visited {
    color: violet;
  }

  &:hover,
  &:focus,
  &:active {
    color: orange;
  }

}

我知道这些是针对页面上的所有 链接的非常广泛的规则，但这是它们的默认外观，所以我想这样做应该没问题(或者甚至需要!) .

现在，我的导航看起来像这样:

<ul class="nav">
    <li><a href="#" class="nav__a">Link 1</a></li>
    <li><a href="#" class="nav__a">Link 2</a></li>
    <li><a href="#" class="nav__a">Link 2</a></li>
</ul>

配合相应的CSS:

.nav__a {
    color:green;
}

不幸的是，只有未访问过的链接会显示为绿色，已经访问过的链接仍然是紫色。
我发现添加 !important 会“解决”问题，但这并不是很干净。

当然可以

.nav__a,
.nav__a:visited {
    color: green; 
}

但这似乎相当臃肿——我也需要为其他链接状态这样做。

有没有什么办法可以解决这个问题，或者这是一种正常的行为——也许我的模块化 CSS 方法有问题？

Answer 1

用这个替换你的代码:

a.nav__a{
   color:green;
}

我希望能为你工作