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. ::ファーストライン
pseudo-element::first-line は、指定された要素のコンテンツの最初の行のスタイルを設定するために使用されます。::first-letter と同様に、pseudo-element::first-line はブロックレベルの要素にのみ使用できます。インライン要素はこの疑似要素を使用する必要があるため、最初にブロックレベルの要素に変換する必要があります。
5.::選択
pseudo-element::selection は、オブジェクトが選択されているときにスタイルを設定するために使用されます。 pseudo-element::selection は、要素が選択されているときにのみ色、背景、カーソル、アウトライン、およびテキストシャドウを定義できることに注意してください。 (IE11 はまだサポートしていません。この属性を定義します) およびその他の属性。
6. ::プレースホルダー
pseudo-element::placeholder は、フォーム要素 (<input>、<textarea> 要素) のプレースホルダー テキスト (HTML のプレースホルダー属性によって設定されたテキスト) を設定するために使用されます。