OOCSS/模块化CSS:战斗链接样式，如何解决？

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;
}

我希望能为你工作

Answer 2

我同意@ambes。

设置

a.nav__a{
   color:green;
}

将所有状态和锚的伪状态设置为color:green;

你避免使用是对的！很重要。您也可以对元素对其块进行范围调整(BEM)。一开始可能感觉怪怪的，但这是正确的做法。干得好！保持超棒！