状態は動的に変化するため、要素が特定の状態に達すると、疑似クラス スタイルが取得され、状態が変化するとこのスタイルが失われます。このことから、その機能はクラスの機能に似ていることがわかりますが、ドキュメントの外部での抽象化に基づいているため、疑似クラスと呼ばれます。
CSS 疑似クラスは、CSS セレクターで動作して、選択したタグまたは要素に特定の効果を生み出す特別なクラスです。
CSS 疑似クラスの構文は次のとおりです。 セレクター: 疑似クラス名 {属性: 属性値}
最も一般的に使用される擬似クラスは、ハイパーリンクの擬似クラスです。 リンクは Web サイトの重要な部分であり、ほとんどすべての Web ページにリンク スタイルを合理的に設計することで、Web ページの外観を向上させることができます。 。 ポイント。リンクには、リンク、訪問済み、アクティブ、ホバーという 4 つの異なる状態があります。次の疑似クラス セレクターを使用して、リンクの 4 つの状態に異なるスタイルを設定できます。
:link: 未訪問のリンクのスタイルを定義します。
:visited: 訪問済みリンクのスタイルを定義します。
:hover: マウスがリンクを通過またはリンク上に移動するときのスタイルを定義します。
:active: リンクをクリックしたときのスタイルを定義します。
例：
<html><head></head><body><a>href a タグはなく、フォントも変更されず、マウスを置いても反応しません</a></br>< ahref=#target=_blank>href は # の a タグはデフォルトで青色で、マウスを置くと手になります。</a></br><ahref=https://www .dotcpp.com/target=_blank>href は URL のタグです。効果は上記と同じです。</a></body></html>
実行結果:
(1):リンク
説明: オブジェクトにアクセスする前に、オブジェクトのスタイル シート プロパティを設定します。
例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}</style></head><body><ahref=''>最初のリンク</a><ahref=''>2 番目のリンク</a></body>< /html>実行結果:
(2):訪問しました
説明: リンク アドレスにアクセスしたときに期限切れになったオブジェクトのスタイル シート属性を設定します。
例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>最初のリンク</a>< ahref= ''>2 番目のリンク</a></body></html>実行結果:
(3):ホバー
説明: オブジェクトにマウスを置くと、そのオブジェクトのスタイル シート プロパティを設定します。
例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:訪問済み{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head> <body><ahref=''>最初のリンク</a><ahref=''>2 番目のリンク</a></body></html>実行結果:
(4):アクティブ
説明: ユーザーがオブジェクトをアクティブ化したとき (マウスのクリックとリリースの間に発生するイベント)、オブジェクトのスタイル シート プロパティを設定します。
例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:訪問済み{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000 ;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>最初のリンク</a><ahref=''>2 番目のリンク</a>< /body>< /html>実行結果:
CSS を定義する際の順序が異なると、リンクの表示効果も異なります。その理由は、ブラウザが CSS を解釈するときに従う「近接原則」にある可能性があります。正しい順序: a:リンク、a:訪問済み、a:ホバー、a:アクティブ。