0

在我的 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 方法有问题？

4

2 回答 2

1

用这个替换你的代码：

a.nav__a{
   color:green;
}

我希望为你工作

于 2015-01-04T20:50:00.943 回答
0

我同意@ambes。

环境

a.nav__a{
   color:green;
}

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

避免使用 !important 是正确的。您也有权将元素范围限定到它们的块 (BEM)。一开始可能会觉得很奇怪，但这是正确的做法。干得好！保持好状况！

于 2015-09-19T14:39:14.920 回答