CSS3の擬似クラスと擬似要素の違いは何ですか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2021-12-22 10:54:04

オリジナル

5548 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 無効な各要素を選択します。