CSS3の擬似クラスと擬似要素の違いは何ですか?

違い: 1. 疑似クラスは、既存の要素が特定の状態にあるときに対応するスタイルを追加するために使用されますが、疑似要素は、DOM ツリーにないいくつかの要素を作成し、スタイルを追加するために使用されます。 2. 疑似要素はドキュメント ツリーの外に要素を作成しますが、疑似クラスは作成しません; 3. 疑似要素は二重コロン「::」で表され、疑似クラスは単一コロン「:」で表されます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

擬似クラスと擬似要素とは

「擬似」という言葉を聞いて何を思い浮かべますか? ? 「偽」、「汪兆銘の疑似政府」、「存在しない」...

疑似クラス: 既存の要素が特定の状態 (スライド、クリック、この状態はユーザーの行動に基づいて動的に変化します。私の理解では、それ自体は存在しない状態であり、特定の状況 (スライド、クリック) でのみトリガーされるということですが、CSS を使用してこの状態のオブジェクトを変更できます。例: ユーザーが指定された要素の上にマウスを移動したとき、:hover を使用して要素の状態を説明できます。これは一般的な CSS に似ており、既存の要素にスタイルを追加できますが、スタイルを追加できない状態でのみ使用できます。要素はスタイルを追加するため、疑似クラスと呼ばれます。

擬似要素: DOM ツリーにないいくつかの要素を作成し、それらにスタイルを追加するために使用されます。たとえば、:before を使用して要素の前にテキストを追加し、そのテキストにスタイルを追加できます。ユーザーにはテキストが表示されますが、実際には DOM ドキュメント内にありません。

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

次の例を参照してください:

例 1:

<ul>
 <li>第一列</li>
 <li>第二列</li>
</ul>

最初の列にスタイルを追加したい場合は、次の 2 つの方法でそれを行うことができます:

(1) 最初の列にクラスを追加し、スタイルを定義します。クラス:

<ul>
  <li class="first-item">第一列</li> 
  <li>第二列</li></ul>
</ul>

.first-item{color:orange;}

(2) クラスを追加する必要がない場合は、first-child pseudo-class を設定することで最初の

にスタイルを追加できます。 li は DOM ツリーにまだ存在します。中

<ul>
  <li>第一个</li>
  <li>第二个</li>
</ul>


li:first-child{color:orage;}

例 2:

<p>Hello World, and wish you have a good day!</p>

段落の最初の文字にスタイルを追加する場合は、次の操作を実行できます:

(1) 最初の文字 要素をラップし、span のスタイルを設定します:

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p> 


.first{color:red;}

(2) 要素が作成されていない場合は、P を設定できます。

要素に1文字目の疑似要素を追加し、スタイルを追加します。このとき、仮想的なspan要素が作成され、そこにスタイルが追加されているように見えますが、実際にはこのspan要素は、 DOM

<p>Hello World, and wish you have a good day!</p>

p:first-letter{color:red;}

上記の例から、疑似クラスの操作オブジェクトはドキュメント ツリー内の既存の要素であるのに対し、疑似要素はドキュメント ツリーの外に要素を作成することがわかります。したがって、疑似クラスと疑似要素の違いは、ドキュメント ツリーの外に要素が作成されるかどうかです。

疑似要素に単一コロンまたは二重コロンを使用しますか?

css3 仕様では、疑似クラスと疑似要素を区別するために、疑似要素を表すために二重コロン (::) を使用する必要があります。たとえば、:: のような疑似要素です。 before と ::after は 2 つのコロンを使用し、コロン (::)、:hover、および :active 疑似クラスは単一のコロン (:) を使用します。 IE8 より前の一部のブラウザを除き、ほとんどのブラウザは疑似要素の二重コロン (::) 表現方法をサポートしています。

ただし、二重コロン (::) を使用する必要がある ::backdrop などのいくつかの擬似要素を除いて、ほとんどの擬似要素は単一コロンと二重コロンの記述 (::after など) をサポートしています。のように書くことができます:after.run。

w3c 標準では、CSS3 標準では疑似要素を二重コロンで記述する必要があるものの、単一コロンの記述も引き続きサポートされていると規定されています。下位互換性を維持するために、現時点では引き続き単一コロンの記述方法を使用することをお勧めします。

一般的に使用される疑似クラスは次のとおりです。

:active は、アクティブ化されている (指定された状態と一致する) 要素を選択します。

:hover は、アクティブ化されている要素を選択します。マウスがホバーしている要素 要素 (指定されたステータスと一致する)

:link 訪問されていない要素を選択します (指定されたステータスと一致します)

:visited 訪問された要素を選択します (

:first-child は、親要素の最初の子要素である要素を選択します。

:lang(value) は、指定された lang 属性を持つ要素を選択します。

:focus キーボード入力フォーカスを選択します。 Elements

:enable 有効な各要素を選択します。

:disable 無効な各要素を選択します。

:checked 選択された各要素を選択します。

:target は現在のアンカー要素を選択します。

:first-of-type は、親要素の特定のタイプの最初の子要素である要素を選択します。

:last-of- type は、親要素の特定のタイプの最後の子要素である要素を選択します。

:only-of-type は、親要素の特定のタイプの唯一の子要素である要素を選択します

: nth-of-type(n) 親要素の特定の型の n 番目の子要素である要素を選択します。

:nth-last-of-type(n) 要素を選択します。は、親要素の最後から 2 番目の子要素です。特定の型の n 要素です。

:only-child は、親要素の唯一の子要素である要素を選択します。

:last-child は、親要素の最後の要素である要素を選択します。

:nth-child(n) は、親要素の n 番目の子要素である要素を選択します

:nth-last-child(n) 親要素の下から n 番目の子要素を選択します

:empty 子要素を持たない要素を選択します

:in -range select 値が指定範囲内の要素を選択します

:out-of-range 値が指定範囲外の要素を選択します

:invalid 値が無効な要素を選択します

:valid 有効な値を満たす要素を選択します。

#:not(selector) selector を満たさない要素を選択します。

#:optional オプションであるフォーム要素を選択します。 「必須」属性ではありません

:読み取り専用は、「読み取り専用」のフォーム要素を選択します。

:読み取り-書き込みは、「読み取り専用」のないフォーム要素を選択します。

:rootルート要素を選択します

一般的に使用される疑似要素

::first-letter 指定された要素の最初の単語を選択します

::first- line 指定した要素の最初の行を選択します

::after 指定した要素のコンテンツの前にコンテンツを挿入します

::before 指定した要素のコンテンツの後にコンテンツを挿入します

::selection 指定された要素でユーザーが選択したコンテンツを選択します

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3の擬似クラスと擬似要素の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。