CSS では、ドキュメント ツリーを超えて情報をフォーマットするために、疑似クラスと疑似要素の概念が導入されています。言い換えれば、疑似クラスと疑似要素は、文の最初の文字、リストの最初の要素、またはマウスが特定の上にあるときなど、ドキュメント ツリーにない部分を変更するために使用されます。ハイパーリンクがオンの場合に設定されるスタイル。
疑似要素とは何ですか?
擬似要素: ドキュメント ツリーにないいくつかの要素を作成し、それらにスタイルを追加するために使用されます。実際、擬似要素は、特定の要素の前後にある通常のセレクターでは実行できないものです。コントロールの内容は要素と同じですが、それ自体は要素ベースの抽象化であり、ドキュメント構造には存在しません。たとえば、:before を使用して要素の前にテキストを追加し、このテキストにスタイルを追加できます。
素子の特性
1. 利点:
(1) DOM ノードを占有せず、DOM ノードの数を減らします。
(2) CSS を使用して JavaScript の問題を解決し、開発を簡素化します。
(3) 意味のないページ要素の追加は避けてください。
2. 短所:
(1) デバッグには役に立たない。
(2) 擬似要素は実際には文書の内容に反映されるのではなく、視覚効果にのみ反映されるため、擬似要素に実用的な内容を追加することはできず、コンテンツのこの部分は検索エンジンによってクロールされません。
CSS は、次の表に示すように、一連の疑似要素を提供します。
1.::後
擬似要素::after では、指定された要素の後にコンテンツを挿入できます。::after では、追加するコンテンツを定義するために content 属性を使用する必要があります。また、::after では、有効にするために content 属性を定義する必要があります。 (コンテンツを挿入する必要はありません) content 属性の値は空として定義できます)。
2. ::前
pseudo-element::before は、指定された要素の前にコンテンツを挿入できます。 ::after と同様に、追加するコンテンツを定義するには content 属性も ::before で使用する必要があり、有効にするためには content 属性を ::before で定義する必要があります (挿入するコンテンツがない場合、 content 属性の値は null として定義できます)。
3. ::最初の文字
擬似要素::first-letter は、指定された要素のコンテンツの最初の文字のスタイルを設定するために使用され、通常、ドロップ キャップ効果を作成するために font-size および float 属性とともに使用されます。擬似要素 ::first-letter はブロックレベル要素にのみ使用できることに注意してください。インライン要素がこの擬似要素を使用したい場合は、最初にブロックレベル要素に変換する必要があります。
4. ::ファーストライン
擬似要素::first-line は、指定された要素のコンテンツの最初の行のスタイルを設定するために使用されます。::first-letter と同様に、擬似要素::first-line はブロックレベルの要素にのみ使用できます。インライン要素はこの疑似要素を使用する必要があるため、最初にブロックレベルの要素に変換する必要があります。
5.::選択
疑似要素::選択は、オブジェクトが選択されているときにスタイルを設定するために使用されます。疑似要素::選択は、要素が選択されている場合にのみ色、背景、カーソル、アウトライン、およびテキストシャドウを定義できることに注意してください。はまだサポートしていません。この属性を定義します) および他の属性を定義します。
6. ::プレースホルダー
擬似要素::placeholder は、フォーム要素 (<input>、<textarea> 要素) のプレースホルダー テキスト (HTML のプレースホルダー属性によって設定されたテキスト) を設定するために使用されます。