css-pseudo-classes と pseudo-elements_html/css_WEB-ITnose

css-疑似クラスと疑似要素

疑似クラスと疑似要素は両方とも CSS セレクターのカテゴリに分類されます。したがって、それらの定義は CSS 標準のセレクターの章にあります。それらは CSS2.1 セレクターと CSS セレクター レベル 3 であり、どちらもすでに推奨規格となっています。

1: 疑似クラスタイプ

css 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます

2: 疑似要素タイプ

css 疑似要素は、特殊効果を追加するために使用されます特定のセレクター これらのセレクター

3: 疑似クラスと疑似要素の違い

疑似クラスと疑似要素の間には根本的な違いがあり、それは標準の記述ステートメントに直接反映されます。

擬似クラスの効果は実際のクラスを追加することで実現でき、擬似要素の効果は実際の要素を追加することで実現できるため、一方は擬似クラスと呼ばれ、もう一方は と呼ばれます。疑似要素理由と呼ばれます。

疑似要素の最初の行の例を見てみましょう。 HTML の一部があり、コンテンツは段落です:

1 <p>I am the bone of my sword. Steel is my body, and fire is my blood. 2 I have created over a thoustand blades. 3 Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. 4 Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

この段落の最初の行を記述したい場合、疑似要素を使用せずにどうすればよいでしょうか?それについて考えると、スパンのレイヤーをネストしてからクラス名を追加する必要があります:

1 <p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span> 2 I have created over a thoustand blades.3 Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. 4 Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

疑似クラスの最初の子の例を見ると、単純なリストがあります:

1 <ul>2 <li></li>3 <li></li>4 </ul>

ul の最初の要素を記述したい場合、新しい要素をネストする必要はなく、最初の既存の li にクラス名を追加するだけです:

1 <ul>2 <li class="first-child"></li>3 <li></li>4 </ul>

ただし、最初の行と最初の要素のセマンティクスは似ていますが、最終的な効果はまったく異なります。

したがって、疑似クラスと疑似要素の基本的な違いは、新しい要素 (抽象化) を作成するかどうかです。

その意味を模倣するという観点から見ると、識別のために新しい要素を追加する必要がある場合、それは擬似要素です。逆に、既存の要素にカテゴリを追加するだけでよい場合、それは擬似クラスです。 。

これが、標準が疑似要素を説明するために「作成」という言葉を正確に使用し、疑似クラスを説明するために「分類」という言葉を使用する理由です。

1 つは新しく作成された「ゴースト」要素を記述し、もう 1 つは「ゴースト」カテゴリに一致する既存の要素を記述します。

疑似クラスは当初、一部の要素の動的ステータス、通常はリンクのステータス (LVHA) を表すために使用されました。その後、CSS2 標準はその概念的範囲を拡張し、論理的には存在するがドキュメント ツリー内で識別する必要のないすべての「ゴースト」カテゴリを含めるようになりました。
疑似要素は要素のサブ要素を表します。このサブ要素は論理的には存在しますが、ドキュメント ツリーには実際には存在しません。

4: 疑似クラスと疑似要素の混同

CSS セレクター レベル 3 2 つの間の混同を区別するために、特別にコロンが使用されます:
疑似クラスはコロンで表されます。 : first-child
疑似要素 次に、2 つのコロンを使用して::first-line