CSSの疑似クラスと疑似要素の違いは何ですか? :before と ::before の違い

この記事の内容は、CSS の疑似クラスと疑似要素の違いを紹介することです。 :before と ::before の違い。困っている友人は参考にしていただければ幸いです。

疑似クラスは、DOM ツリーの外部の情報、または単純なセレクターでは表現できない情報を選択するために使用されます。前者には、指定されたステータスに一致する要素 (:visited、:active など) が含まれ、後者には、DOM ツリー内の特定の論理条件を満たす要素 (## など) が含まれます。 #:first-child、:first-of-type、:target。

(特別なクラスセレクターに相当し、いくつかの特殊効果を追加するために使用されます)

疑似要素 は、DOM ツリーに定義されていない仮想要素です。他のセレクターとは異なり、要素を最小選択単位として使用せず、要素の指定されたコンテンツを選択します。たとえば、::before は選択要素の前のコンテンツを表します。つまり、""; ::selection は選択要素の選択されたコンテンツを表します。

(特別なスタイルやコンテンツを保存するために使用できる特別な要素 (p、span) と同等)

CSS3 の場合擬似クラスと擬似要素の構文にも違いがあります。擬似要素は :: で始まるように変更されます。ただし、歴史的な理由により、ブラウザーは引き続き : で始まる疑似要素をサポートしますが、:: で始まる標準形式で記述することをお勧めします。

• 疑似クラス

:link未訪問の要素を選択1##:visited訪問済みの要素を選択してください1:first-child親要素の最初の子要素である要素を選択します 2:lang指定された lang 属性を持つ要素を選択します2 #:focus:enable:disable#:チェック済み##:target:first-of-type:last-of -type: Only-of-type:nth-of-type(n)##:nth-last-of-type (n) ##:オプション##3 「読み取り専用」のないフォーム要素を選択してください3ルート要素を選択3

セレクター

意味

CSS

:active

アクティブ化されている要素を選択してください

1

:hover

##マウスでホバーされている要素を選択

1

キーボード入力フォーカスのある要素を選択

2

有効な要素をそれぞれ選択

3

無効になっている各要素を選択します

3

選択した各要素を選択

現在のアンカー要素を選択します

3

Select 特定のタイプの最初の子要素である要素親要素

3

親要素の特定のタイプの最後の子要素である要素を選択します

#3

親要素の唯一の子要素である、特定の型の唯一の子要素である要素を選択します

3

選択内容は、その親要素を満たしています。特定の型の n 番目の子要素 ​​

3

親要素の最後から 2 番目の要素である特定の型の n 番目の要素を選択します

3

:only-child

親要素の唯一の子要素である要素を選択します

3

:last-child

親要素を満たす最後の要素を選択します要素の要素

3

:nth-child(n)

親要素の n 番目の子要素である要素を選択

3

:nth-last -child(n)

親要素の下から n 番目の子要素である要素を選択します

3

:empty

子要素を持たない要素を選択してください

3

:in-range

指定された範囲内の値を持つ要素を選択します

3

##:範囲外

##値が次の要素を選択してください指定された範囲内にありません

3

:無効です

値が無効な要素を選択してください

3

:valid

#有効な値要素であるための要件を満たす値を選択してください

3

:not( selector)

# #セレクターを満たさない要素を選択します

#3

#オプションのフォーム要素を選択します。つまり、「必須」属性がありません

#3

#:読み取り専用

#「読み取り専用」のフォーム要素を選択

:読み取り-書き込み

:root

• #擬似要素

  セレクター意味CSS##::selection指定された要素でユーザーが選択したコンテンツを選択します#3

  ::first-letter	指定された要素の最初の単語を選択します	1
  ::first-line	指定された要素の最初の行を選択します	1
  ::after	前指定された要素のコンテンツ コンテンツの挿入	#2
  ::before	指定された位置 要素のコンテンツの後にコンテンツを挿入します。	2

##:before と ::before の違い

2 つの記述方法は同等であり、どちらも擬似要素を表します。
:beforeはCSS2の書き方、::beforeはCSS3の書き方です。

2. #::before は ::before よりも互換性が高くなりますが、H5 では ::before

3. # を使用することをお勧めします。開発

   ##注:

# 疑似要素は content 属性と一緒に使用する必要があります

1. 疑似要素は DOM には表示されないため、js を介して操作することはできません。

2. # それらは CSS レンダリング レイヤーに追加されるだけです。

   擬似要素の特殊効果は通常、hover 擬似クラス スタイルを使用してアクティブ化します。

3. .test:hover::before { /* 这时animation和transition才生效 */ }

   参考アドレス: https://www. cnblogs.com/ammyben/p /8012747.html

##https://blog.csdn.net/yangxiaoyanger/article/details/79712180

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