同じページ内のリンクのテキスト色が異なる場合の設定について

ヘッダーのナビメニューは黒、フッターのナビメニューは白、といったようにリンク色が異なる場合、効率のよい書き方はありますか?
リンクが出てくる度に、毎回それぞれのセレクタに対して↓のような感じで設定しているのですが、

.contact-btn:link,
.contact-btn:visited,
.contact-btn:hover,
.contact-btn:active {
  color: #fff ;
}

リンクごとに毎回このように書いているので、もっと良い方法や書き方があるのではないかと気になっています。
アドバイスいただけると嬉しいです。
よろしくお願いいたします。

色ごとにクラスを作っておくのもいいかもしれません。.black{
color:black;
}.white{
color:white;
}必要なところにこのクラス名を配置していきます。<div class="contact white" >白色</div>
<div class="contact black" >黒色</div>宜しくお願い致します。

この記事が気に入ったらサポートをしてみませんか?