CSS: 訪問した疑似クラスセレクタの秘密の記憶

昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色を変更したいと思ったのですが、何度も変更しても効果が平均的であることがわかりました。色に関連する CSS 設定が他にもいくつかあることを思い出しました。その結果、この疑似クラス セレクターを長い間使用していなかったため、サポートされている具体的な CSS を思い出すことができませんでした。自分で整理して記録する必要があることがわかりました。

1. 愛から憎しみへ

リンク 4 疑似クラス (最後の 2 つの疑似クラスは、後でほぼすべての HTML タグ要素にドラッグされました) を同時に使用する場合、順序は次のようになります: :link → :visited → :hover → :active 。

最初の文字を合わせるとLVHAとなり、順序はlove-hateと全く同じです。これは愛と憎しみを意味し、いわゆる愛が憎しみに変わることを意味しますので、この順序は覚えやすいです。

現在では、:link 疑似クラスはあまり使用されなくなりましたが、まだ用途はあります。通常は、<a> 要素の色を直接設定するために使用します。たとえば、次のようになります。

a { color: blue; }

実際、次の表現の方が適切で、より標準化されています。

a:link { color: blue; }

この2つの違いは何でしょうか?

違いは、次の 2 つの <a> 要素のうち、前者は a:link セレクターに一致できますが、後者は a セレクターにのみ一致できることです。

<a href="##">テキスト</a>
<a>テキスト 2</a>

たとえば、<a> 要素の無効状態を示す href 属性を削除し、より適切に制御するために a:link disabled および nondisabled CSS を使用します。

ただし、a:link セレクタを使用する場合は、a:visited セレクタも設定する必要があります (a:link が先頭にあるため)。そうしないと、訪問したリンクの色はシステムまたは現在の要素によって設定された色に従うため、少し混乱が生じます。そのため、最近では :link 疑似クラス セレクタが使用されることはほとんどありません。

:visited 疑似クラス セレクターは、特に記事リストや章リストなどのリスト形式のリンク サイトでは、依然として非常に便利です。これにより、ユーザーに「この記事を読んだ」ことを知らせることができ、比較的フレンドリーなエクスペリエンスが得られます。

2. :visited疑似クラスセレクターはCSSのサポートが限定的である

おそらくセキュリティ上の理由から、:visited 疑似クラス セレクターは CSS のサポートが制限されており、現在は color 、 background-color 、 border-color 、 border-bottom-color 、 border-left-color 、 border-right-color 、 border-top-color 、 column-rule-color 、 outline-color の CSS のみをサポートしています。

同時に、::before や ::after などの疑似要素はサポートされていません。たとえば、次のようにテキストを使用して訪問したリンクをマークするとします。

a:visited::after{content:'visited';} // 注意，不支持

申し訳ありませんが、良いアイデアではありますが、どのブラウザもサポートしていないため、諦めてください。

幸いなことに、:visited 疑似クラスは子セレクターをサポートしています。ただし、制御できる CSS プロパティは :visited とまったく同じで、色関連の CSS プロパティがいくつかあるだけです。また、::before や ::after などの疑似要素もサポートされていません。

例えば：

a:訪問済みスパン{色:赤;}
<a href="">テキスト<span>を訪問</span></a>

ブラウザでリンクにアクセスした場合、次のスクリーンショットに示すように、<span> 要素のテキストの色は赤になります。

したがって、次の方法を使用して、訪問済みリンク テキストとそれに続く「訪問済み」という単語を実装できます。 HTML は次のとおりです。

<a href="">テキスト<small></small></a>

CSS は次のとおりです。

small { position: absolute; color: white; } // ここで color: transparent を設定するのは無効です small::after { content: 'visited'; }
a:visited 小さい { 色: 紫; } 

限定的な CSS サポートに加えて、:visited 疑似クラス セレクターには、他にもいくつかの奇妙なプロパティがあります。

3. 透明感がない

:visited 疑似クラスセレクターを使用して色を制御する場合、構文は半透明の色をサポートしますが、パフォーマンスは単色または完全に透明になります。

例えば：

{ 色: 青; }
a:visited { 色: rgba(255,0,0,.5); }

結果は半透明の赤ではなく、完全に不透明な純粋な赤になります。

4. リセットすることしかできず、何もないところから設定することはできない

次の CSS では、訪問された <a> 要素に背景色がありますか?

{ 色: 青; }
a:visited { 色: 赤; 背景色: 灰色; }

HTML は次のとおりです。

背景色はありますか？ </a>

答えは、次のスクリーンショットに示すように、背景色がないということです。

:visited 疑似クラスセレクターのカラー値はリセットすることしかできず、無から設定することはできないためです。

次のように変更できます。

{ 色: 青; 背景色: 白; }
a:visited { 色: 赤; 背景色: 灰色; }

この時点でのテキスト効果は次のようになります。

つまり、訪問時に背景色が表示されるように、デフォルトで背景色が必要です。

5. :visitedによって設定され提示されたカラー値は取得できません

つまり、テキストのカラー値が :visited セレクターによって設定されたカラー値として表現されている場合、JS の getComputedStyle() を使用してこのカラー値を取得することはできません。

既知の CSS は次のとおりです。

{ 色: 青; }
a:visited { 色: 赤; }

リンクが赤く表示され、この時点で次の JavaScript コードが実行されます。

window.getComputedStyle(document.links[0]).color;

出力結果は「rgb(0, 0, 255)」で、これは青に対応する RGB カラー値です。

次のスクリーンショットは以下を示しています。

6. 思い出が完成

つまり、:visited 疑似クラスセレクターは、多くの「癖」を持つセレクターです。:hover や :active などのセレクターと同じように理解しようとすると、サポートされていない機能が多すぎたり、従来の理解に沿わない動作が多すぎたりして、間違いなく混乱するでしょう。

その理由は、100% セキュリティ上の理由だと思います。ブラウザが JS やその他の動作を通じてどのリンクにアクセスしたかを知ることができれば、私のプライバシーが直接公開されてしまうため、絶対に受け入れられません。そのため、:visited 疑似クラス セレクタを使用して何か凝ったことをしたい場合は、このアイデアをあきらめて、一生懸命取り組むことをお勧めします。

さらに、:visited には他にも奇妙な機能がいくつかあるはずなので、誰でも追加していただけます。

要約する

上記は、編集者が紹介した CSS :visited 疑似クラスセレクターの秘密の回想録です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。