a:linkタグを一部だけ変えたい

Question

a:link{ color: #000000; }
a:visited{ color: #000000; }
a:hover { color: #6F6F6F; }
a:active { color: #000000; }

というタグを使っています。
このタグのlinkとvisitedのみを一部の場所で変えたいのですが
やはり4つすべて指定する必要がありますか？
やはり4つ書かないと動かないみたいで、しかし4つ書くとhoverとactiveの色指定を2回することになってしまい、後々面倒そうなのですが・・・。
試しにhoverとactiveに何も指定しないで

a:link{ color: #ffffff; }
a:visited{ color: #ffffff; }
a:hover { color:; }
a:active { color:; }

と書いたらやはり動きませんでした。

Comments

[azuapricot]

何も指定しないでそうやって書くくらいならそもそも記述しないほうが良さそうな気もしますけど・・・。
クラスとかつけてCSSはわけているのでしょうか。

Answer 1

このように工夫して回避することは可能かもしれません。

a:link:not(:hover):not(:active){ color: #ffffff; }
a:visited:not(:hover):not(:active){ color: #ffffff; }

ふつうにCSSをかけると、a:link、a:visited、a:hover、a:activeはすべて詳細度が等しいため、後から書いたほうが優先されます。

Answer 2

皆さんありがとうございました
a:link{ color: #000000; }
a.ichibu🔗not(:hover):not(active){ color: #ffffff; }
a:visited{ color: #000000; }
a.ichibu:visited:not(:hover):not(active){ color: #ffffff; }
a:hover { color: #6F6F6F; }
a:active { color: #000000; }
と記述することで無事動作しました(≧▽≦)
ありがとうございました。

Answer 3

こんな感じで、変更したいaタグにclassを付けて指定してあげるのはどうでしょう

<a href="hogehoge" >test<a>
<a href="hogehoge" >test<a>
<a href="hogehoge" class="ichibu" >test<a>
<a href="hogehoge" >test<a>
<a href="hogehoge" >test<a>

<style>
a:link, a:visited, a:active { color: #000000; }
a:hover { color: #6F6F6F; }
a.ichibu:link, a.ichibu:visited { color: red; }
</style>

Comments

[maisumakun]

自分も同様なことを考えたのですが、これでは、a:ichibuに:hoverが効きません。

https://codepen.io/anon/pen/MNQvQX

[yukikp]

なるほど。これは不勉強でした。