CSS における疑似クラス セレクターの役割は非常に重要であると言えます。CSS に疑似クラス セレクターがない場合、多くのエフェクトを JS の助けを借りて完成させる必要があります。これにより、コード量が増加するだけでなく、make も大きくなります。維持するのが難しい。このようなプログラマーの負担は、開発効率を向上させ、より高品質な開発を同じ世界で完了させるというCSSの目的にも反します。
擬似クラス セレクターには、擬似クラス セレクターと擬似クラス オブジェクト セレクターが含まれ、プレフィックス識別子としてコロン (:) を使用します。 コロンの前にセレクターを追加して、疑似クラス アプリケーションの範囲を制限できます。コロンの後には疑似クラス名と疑似クラス オブジェクト名が入ります。コロンの前後にはスペースがありません。それ以外の場合は、コロンと見なされます。図に示すように、クラス セレクター。
次の表には、ほとんどの疑似クラス セレクターが含まれています。
動的疑似クラス
動的擬似クラスは動作スタイルの一種であり、これらのスタイルは HTML には存在せず、ユーザーがページを操作するときにのみ反映されます。動的擬似クラス擬似クラス セレクターには、次の 2 つの形式が含まれます。
アンカー擬似クラス。:link、:visited などのリンクで最も一般的なスタイルです。
動作擬似クラスは、:hover、:active、:focus などのユーザー操作擬似クラスとも呼ばれます。
説明を簡単にするために、インラインとして記述します。実際のアプリケーションでは、インラインを使用することはお勧めしません。
：リンク
ジャンプする前にハイパーリンクのスタイルを設定します。使用方法は次のとおりです。
<ahref=#target=_blank>ジャンプ</a>
上のハイパーリンクの前のスタイルを赤色のフォント色で下線なしに設定したい場合は、次のように設定できます。
:訪問しました
この疑似クラスは :link の逆です。 :link はリンク前のスタイル、 :visited はリンク後のスタイル、つまり訪問後のハイパーリンク スタイルです。
<ahref=#target=_blank>ジャンプ</a>:li
毎日の学習では、誰もがその前後のリンクを一緒に書くことができますが、これは便利で、速く、セマンティックです。これにより、多くの学生がこれら 2 つの疑似クラスにカバレッジ効果があることを知りません。次の例は、一般的な理解を助けることができます。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>ジャンプ</a></body></html>上記のコードは、HTML ページからログイン ページへのジャンプ リンクです。実行後のレンダリングは次のとおりです。
:ホバー
:hover 擬似クラス セレクターは、ユーザーが要素上にマウスを移動したときのスタイル効果に使用されます。これはハイパーリンクに使用されるだけでなく、ボタンなどの多くの要素にも適用できます。マウスをその上に移動すると、ボタンの北の背景色が濃くなるか色が変わります。もちろん、他の設定方法もありますが、ホバーが最も簡単で速い方法であることは疑いの余地がありません。ここでは、まずハイパーリンクを使用するテクニックを紹介し、次にハイパーリンクを展開して、要素上にマウスを移動した後の効果を変更するために使用します。
マウスをタグ要素の上に置いたときに要素の色を変更する場合、コードは次のようになります。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>ジャンプ</a></body></html> 
拡大する
構造体コードは以下のとおりです。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>マウスを div 要素の上に移動すると、背景色が黒に変更され、フォントが白に変更されるという効果が必要な場合、コードは次のとおりです。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:o range;text-align:center;transition:all1s;}div:hover{背景:黒;カラー:白;}</style></head><body><div>:hover</div></body> </html>：アクティブ
:active は、ユーザーが要素をクリックしたときのスタイル効果に使用されます。これは主にフォーム コントロールで使用され、ユーザーがクリックすると、ボタンを押したような効果が得られます。同じ理由で、これを拡張エリアに置きました。
ハイパーリンクをクリックしたときに、ハイパーリンクのフォントの色を変更したいのですが、実装コードは以下のとおりです。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>ジャンプ</a></body></html>拡大する
この例では、div を使用してボタンを模倣しています。HTML に付属するボタンのスタイルを一言で説明するのは難しいですが、スタイルを模倣して制御するのは簡単です。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :緑;フォントサイズ:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{background:orange;color:white;}</style></head><body><div>ボタン</div></body></html>：集中
:focus は、多目的要素がフォーカスになったときの効果をスタイルするために使用されます。これはフォーム コントロール要素でよく使用されます。
構造コード:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></本文></html>
入力にフォーカスを置きたい場合、背景色は #CCC で、実装コードは次のようになります。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>入力がフォーカスを取得した後に背景色をターゲット色に変更するスタイル効果がわかります。
注意すべき点:
(1) 上記の疑似クラス セレクターは順序原則に従います。つまり、訪問した疑似クラスにホバーしてからアクティブな疑似クラスにリンクします。
(2) ホバーとアクティブは、ユーザー動作の疑似カテゴリに含まれます。
第一子
擬似クラスの first-child は、指定された親要素の下の最初の子要素と一致します。たとえば、ul li:first-child は、<ul> 要素の下の最初の <li> 要素と一致します。
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*<ul>*/color:red; の下の最初の <li>タグと一致します。}</style></head>< body> <ul><li>dotcpp プログラミング</li><li>dotcpp プログラミング</li><li>dotcpp プログラミング</li></ul></body></html>実行結果:
アストチャイルド
first-child と同様に、擬似クラス last-child は、指定された親要素の下の最後の子要素と一致します。たとえば、ul li:last-child は、<ul> 要素の下の最後の <li> 要素と一致します。サンプルコードは次のとおりです。
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*<ul>*/color:red; の下の最後の <li>タグと一致します。}</style></head><body > <ul><li>dotcpp プログラミング</li><li>dotcpp プログラミング</li><li>dotcpp プログラミング</li></ul></body></html>実行結果:
n番目の子
擬似クラス nth-child は CSS3 の新機能で、指定された要素の下の n 番目の子要素と一致します。たとえば、ul li:nth-child(2) は <ul> 要素の下の 2 番目の <li> 要素と一致します。サンプルコードは次のとおりです。
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*<ul>*/color:red; の下の 2 番目の <li>タグと一致します;}</style></ head> <body><ul><li>dotcpp プログラミング</li><li>dotcpp プログラミング</li><li>dotcpp プログラミング</li></ul></body></html>実行結果:
