css3の擬似クラスと擬似要素とは何を意味しますか?-フロントエンドQ&A-php.cn

CSS3 では、疑似クラスは、既存の要素が特定の状態にあるときに、対応するスタイルを追加するために使用されるセレクターであり、この状態はユーザーの動作に基づいて動的に変化します。一方、疑似要素は「偽の要素」を意味します。または「偽装要素」。これは、DOM ツリーにないいくつかの要素を作成し、それらにスタイルを追加するために使用されるセレクターです。

css3の擬似クラスと擬似要素とは何を意味しますか?

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

疑似クラスとは何ですか?

疑似クラスは、既存の要素が存在する場合に使用される型です。特定の状態 (スライド、クリックなど) に対応するスタイルのセレクターが追加され、この状態はユーザーの動作に基づいて動的に変化します。

例: ユーザーが指定された要素の上にマウスを移動すると、:hover を使用してこの要素の状態を説明できます。これは一般的な CSS に似ており、既存の要素にスタイルを追加できますが、 DOM ツリーでは、スタイルは記述された状態でのみ要素に追加できるため、疑似クラスと呼ばれます。

疑似要素とは何ですか?

疑似要素簡単に理解すると、「偽の要素」または「偽装要素」です。」。実際、このように理解できます。疑似要素は実際には仮想要素です。要素は (コード形式では) 存在せず、ドキュメント内で見つけることもできないため、疑似要素は仮想要素です。

疑似要素は、DOM ツリーにないいくつかの要素を作成し、それらにスタイルを追加するために使用されるセレクターです。

疑似要素を使用すると、要素の ID やクラス属性に頼ることなく、選択した要素の特定の部分のスタイルを定義できます。たとえば、擬似要素を使用して、段落の最初の文字のスタイルを設定したり、要素の前後にコンテンツを挿入したりできます。

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

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

例 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-この時点では、変更された 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) < の場合;span> 要素は作成されていません。

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

ログイン後にコピー

p:first-letter{color:red;}

ログイン後にコピー

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

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

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

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

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

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