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

all とアンカーの疑似状態をcolor:green;

!important の使用を避けるのは正しいことです。また、要素をそのブロック (BEM) にスコープすることも正しいです。最初は奇妙に感じるかもしれませんが、それは正しいことです。よくやった！素晴らしい滞在！

于 2015-09-19T14:39:14.920 に答える