web-dev-qa-db-ja.com

訪問時にアンカータグの色の変更を無効にする

訪問時にアンカータグの色の変更を無効にする必要があります。これは私がしました：

a:visited{ color: gray }

（リンクは訪問前は灰色で表示されます。）しかし、これはリンクが訪問された後に色を明示的に指定する方法です。これもまた色の変更です。

明示的な色の変更をせずにアクセスしたときにアンカータグの色の変更を無効にするにはどうすればよいですか？

htmlcssanchor
70
popcoder

できません。スタイルを設定できるのは、訪問済み状態のみです。

これを見つける他の人々のために、あなたがそれらを正しい順序で持っていることを確認してください：

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */
78
Rich Bradshaw

アンカーの色をアン​​カーの親要素と同じままにする場合は、継承を活用できます。

a, a:visited, a:hover, a:active {
  color: inherit;
}

各セレクタに対してルールを繰り返す必要がないことに注意してください。セレクタのカンマ区切りリストを使用するだけです（アンカー擬似要素の順序は重要です）。また、特別なアンカーカラーを選択的に無効にする場合は、クラスに擬似セレクターを適用できます。

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

あなたの質問は訪問した州についてのみ尋ねますが、私はあなたがすべての州を意味すると仮定しました。訪問済み以外のすべての色の変更を許可する場合は、他のセレクターを削除できます。

164
Ryan

:hoverが:visitedをオーバーライドし、:visitedが初期色と同じであることを確認するには、:hoverが:visitedの後に来る必要があります。

したがって、色の変更を無効にするには、a:visitedをa:hoverの前に配置する必要があります。このような：

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

:visited変更を無効にするには、非擬似クラスでスタイルを設定します。

a, a:visited { color: gray; }
a:hover { color: red; }
11
Rob Lokhorst

a:visitedの色を設定するのは良くないと思います。タグaのデフォルトの色を知って、毎回a:visitedと同期する必要があります。

デフォルトの色については知りたくありません（アプリケーションのcommon.cssで設定するか、外部スタイルを使用できます）。

私はそれがいい解決策だと思う：

HTML：

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS：

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}
0
Smagin Alexey

セレクタを削除するか、テキストが通常表示される色と同じ色に設定します。

0
Kyle