web-dev-qa-db-ja.com

訪問済みリンクの色を未訪問リンクの色に設定します（通常の質問ではありません）

A：visited CSSを、通常のaが設定されているwhatever色に設定する必要があります。

ブラウザに伝えたいのは、訪問したリンクには、訪問されていないリンクと同じ色を使用してください.

これを行う必要があります特定の色を指定せずに

たとえば、通常の未訪問リンクの色として「緑」を使用する奇妙なブラウザが登場した場合、このCSSは、訪問したリンクに同じ緑を使用するようブラウザに指示する必要があります。ブラウザで使用されている色は正確に私のコードに対して透明である必要があります。したがって、「何色でも」というフレーズです。

追伸a：visitedとaを特定の色に設定する方法を知っています。それは私が求めていることではありません。

P.P.S.必要に応じてJavaScriptを使用します。しかし、私はブラウザにこれをさせることに本当に熱心です。

なぜ私はあなたが尋ねるようなことをしたいのですか？

IE8がリンクに使用する青色は、とてもクールです。 ＃0000FFではありません。素敵な青の色合いです。そこで、訪問済みリンクと未訪問リンクの両方に設定したいと思います。ただし、スクリーンショットを撮ったり、アドオンを使用して毎回正確な16進数値を選択したりしないでください。 IEが後で他の素晴らしい色合いに色を変更する場合、このコードは機能するはずです。再びヘックスを見つけてコード全体で変更したくないです。

これが理由の1つにすぎません。その青のヘクスをくれないでください。それを見つけるのは簡単ですが、それは答えではありません！

htmlcssanchorvisited
51
anon355079
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}

もちろん。

いくつかのテキストリンク（イメージリンクではなく）が私のプロジェクトのメインメニューの主要な部分であったため、これが必要でした。したがって、ブラウザの色ではなく、私の色にしたいのです。

各リンクは、CSSで特定の色（MY色）が設定されたクラスのpタググループに囲まれています。

9
Fintan

Danny Robers script はFirefoxで動作し、Chrome（IEについて不明）。

FWIW、特別な値 HyperlinkText はあなたが望むことをするための「標準的な」方法でしたが、2003年春にCSS3から削除されました。

Firefoxには以下が機能するため、Firefoxが実装を開始した唯一のブラウザのようです。

a：visited {color：-moz-hyperlinktext; }

4
Dean Brettle

CSSを使用してこれを行う方法はありません。ブラウザは、それが知っているデータベースエントリのみに基づいてリンクが訪問されたことを示し、特定のブラウザ設定で指定されたデフォルトの色を使用します。

CSSは物理的にページ上の何かの色を取得できません。それはまさにそれです。唯一の方法は、Danny Robertsの答えのようなjavascriptを使用することです。

彼の答えが正しく機能しないと思うのは、$('a:visited')がその時点で訪問したすべてのリンクを選択するだけで、それらの色が変更されるからです。

必要なのは、クリックイベントを監視し、毎回コードを再実行することです。

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});
3
Marcus Whybrow

純粋なCSSソリューションがあるとは思わない。通常、色を選択し、a：linkとa：visitedの両方に同じ色を設定します。

{color：inherit}を試しましたが、それは役に立ちませんでした。

ただし、このjQueryソリューションは非常に効果的です。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                var normalColor = $('a:link').css('color');
                $('a:visited').css('color', normalColor);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com">Google</a>
        <a href="nowhereyouvebeen">No where you've been</a>
    </body>
</html>
3
Danny Roberts

これを達成するための純粋なCSSの方法はないと思います。 JavaScriptを使用してaの色を取得し、a：visitedをその色に設定する必要があると思います。a{color：#dea}が指定されていない限り、これはおそらくすべてのブラウザーで機能しません。

1
easement

Presto：

$(function(){
  var sheet = document.styleSheets[document.styleSheets.length-1];
  sheet.insertRule(
    'a:visited { color:'+$('a:link').css('color')+'; }',
    sheet.length
   );
});

これをテストし、Chromeで動作することを確認できます。ただし、どのsheetにルールを追加するかを忘れないでくださいmedia attribute =関心のあるメディアに適用されます。さらに、aカラーリングをオーバーライドするルールがある場合、これは適切に機能しない可能性が高いため、スタイルシートにそのことを明確にしてください。

とにかくこれが非常に賢明な実践であるかどうかはわかりません。個人的には、私は常にすべてのサイトのリンクの色を明示的に定義しています。

PS：

どうやらIE（どのバージョンかわからない））独自の構文を主張：

sheet.addRule('a:visited', $('a:link').css('color'), -1);
0
ChaseMoskal

この質問のタイトルが「訪問済みリンクの色を未訪問リンクの色に合わせて設定する」と示唆しているように、私は解決する必要がありました。私にとっては、回帰テスト（pdiff-perceptual diff）に使用するブラウザーページコンテンツスクリーングラブの画像比較を実行する方法が必要でした。ここに私のために働いたコードがあります。

(function(){
  var links = document.querySelectorAll('a');
  for (var i=0; i<links.length; i++) {
    var link = links[i];
    if (link.href) { //must be visitable
      var rules = window.getMatchedCSSRules(link) || [];
      var color = '#0000EE' //most browsers default a:link color;
      for (var j=0; j<rules.length; j++) {
        var rule = rules[j];
        var selector = rule.selectorText;
        color = rule.style['color'] || color;
      }
      link.setAttribute('style','color:' + color + ' !important');
      //this was enough for me but you could add a 'a:visited' style rule to the rule set
    }
  }
})();
0
kernowcode

気にしないで。質問者の質問により具体的に関連するものについては、他の回答を参照してください。

私はこれを行う：

a, a:visited { color:#4CA1F6; }
a:hover      { color:#4CB6E1; } a:active  { color:#0055AA; }

このスレッドは私に考えさせてくれましたそして、私のメソッドに以下の改善を加えました：

a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus  { color:#4CB6E1; } 
a:active          { color:#0055AA; }
0
ChaseMoskal