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

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

このチュートリアルの動作環境: 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) クラス メソッドを追加する必要がない場合は、次のように設定することで最初の 25edfb22a4f469ecb59f1190150159c6 にスタイルを追加できます: 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) 45a2772a6b6107b401db3c9b82c049c2 要素を最初の文字で囲み、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 標準では疑似要素を二重コロンで記述する必要があるものの、単一コロンの記述も引き続きサポートされていると規定されています。下位互換性を維持するために、現時点では引き続き単一コロンの記述方法を使用することをお勧めします。

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

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

• :hover は、マウスがホバーしている要素を選択します (指定された状態と一致します)

• :link は、訪問されていない要素を選択します (指定された状態と一致します)

• :visited 訪問済みの要素を選択します (指定されたステータスと一致します)

• :first-child 訪問済みの要素を選択しますは親要素の最初の子要素です

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

• :focusキーボード入力フォーカスのある要素

• :enable 有効なすべての要素を選択します

• :disable すべての無効な要素を選択します

• :チェック済み 選択した各要素を選択します

• #: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 は、次の条件を満たさない要素を選択します。子要素

• #:範囲内選択 値が指定範囲内の要素を満たす

• #:範囲外 要素を選択値が指定範囲外の要素

• #:invalid 値が無効な値の要素を選択

• #:valid 要素を選択値が有効な値である

• #:not(selector) セレクターを満たさない要素を選択します 要素

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

• :read-only 「readonly」を選択します。 フォーム要素

• :読み取り/書き込みは、「readonly」なしのフォーム要素を選択します。

• :root は、ルート要素を選択します。

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

#::first-letter 指定された要素の最初の単語を選択します
#::first-line 指定された要素の最初の行を選択します指定された要素
::after 指定された要素のコンテンツの前にコンテンツを挿入します
: :before指定された要素のコンテンツの後にコンテンツを挿入します
::selection 指定された要素でユーザーが選択したコンテンツを選択します
(学習ビデオ共有 :

css ビデオ チュートリアル

)

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