これは何
aタグの:visitedに色を指定したのに効かなかった時に調べてもパッと答えが出てこなかったので記録しておきます。
効かなかった理由
ズバリ指定している色にアルファチャンネルを指定していたからでした。
MDNを見ると以下のように記載されています。
利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の :visited 状態ではないものが代わりに使用されますが、アルファチャンネルが 0 であった場合は、 :visited で設定されたスタイルセットは全体的に無視されます。
私が詰まっていた時は
デフォルト時： rgba(0, 0, 0, 0.87)
:visitedの時： rgba(0, 0, 0, 0.6)
のように色を指定していました。
/* こんな感じ */
.textlink {
color: rgba(0, 0, 0, 0.87);
}
.textlink:visited {
color: rgba(0, 0, 0, 0.6);
}
この時:visitedで指定されているアルファチャンネル0.6が無視されて全体の0.87が採用されます。
さらに指定しているRGB値は同じだったため、結果としてリンク訪問前後で色が変わらないようになっていました。
解決策
:visitedではアルファチャンネルを使わない色に置き換えて指定すれば色が変わります。