CSSで疑似クラスにアクセスしました
疑似クラス 要素またはcssセレクターのさまざまな状態を表示することです。訪問済み疑似クラスは、リンクがすでに訪問されていることを示すためのものです。
この疑似クラスは主にリンクに関連付けられています。
構文
a:visited { color:green;}
:visited pseudo classの実際の使用法を確認しましょう 次のように、さまざまなシナリオで-
例
<html> <head> <style> a:visited { color:green;} </style> </head> <body> <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>
説明
リンクを初めて表示すると、通常のリンクの色(青)で表示され、このリンクに1回アクセスすると、リンクは緑に変わります。
例
<html> <head> <style> /* setting default style to make the style visible for :visited state */ a { background-color: white; border:1px solid white;} a:visited {border:yellow;} </style> </head> <body> <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>
説明
この例では、リンクにアクセスすると、リンクに1pxの黄色の境界線が含まれます。
例
<html> <head> <style> /* setting default style to make the style visible for :visited state */ a { background-color: white; } a:visited { background-color: seagreen;} </style> </head> <body> <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>
説明
リンクにアクセスすると、背景色がシーグリーンに変わります。
スタイリングの制限
プライバシーとセキュリティ上の理由から、訪問した疑似クラスは、color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-などの限られたcssプロパティのセットで機能します。 color、column-rule-color、outline-color、およびSVG属性は、塗りつぶしとストロークです。
ブラウザの互換性
Chrome | Firefox | エッジ | IE | サファリ | Opera |
1 | 1 | はい | はい | 1 | 3.5 |
-
CSSの標準リンクスタイル
要件に応じてリンクのスタイルを設定できます。リンクには、通常のテキストと区別できるスタイルを設定することをお勧めします。さまざまなリンク状態のデフォルトのリンクスタイルは次のとおりです- リンク状態 色 アクティブ #EE0000 フォーカス #5E9ED6またはWindowsとMacの場合は、同様の青い輪郭の色合い、 #F07746 Linuxのアウトライン、テキストの色は同じまま ホバー #0000EE リンク #0000EE 訪問済み #551A8B 注 −上記の色は、新しいバージョンのブラウザで変更される場合があります。適切な機能のために、疑似セレク
-
CSS:focus-疑似クラス内
フォーカスされた要素の親のスタイルを設定する場合は、CSS:focus-withinpseudo-classを使用します。 次の例は、CSS:focus-withinpseudo-classを示しています。 例 <!DOCTYPE html> <html> <head> <style> form { margin: 2%; padding: 2%; display: flex; flex-direction: column; &