CSS で ::before は何を意味しますか

CSS の

"::before" は「...の前」を意味します。疑似要素を作成し、選択した要素の最初の子要素として設定するために使用される疑似クラス要素です。、挿入されました。要素の他のコンテンツの前の構文は「element::before{スタイル コード}」です。

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

css における ::before の意味

css では、::before は、生成されたコンテンツ要素を表す疑似クラス要素です。は、対応する要素の抽象化可能なスタイルの最初の子要素、つまり、選択された要素の最初の子要素を表します。

挿入するコンテンツを要素の他のコンテンツの前に挿入するには::before を使用します。デフォルトではインラインで表示されます。 ::before では、コンテンツの値を指定するために content 属性が必要です。

::使用シナリオの前 (要素の前にアイコンを追加するなど)

<p class="test">
     2019/11/29 15:35:51
</p>//在这前面加一个小闹钟的图标就可使用::befor

.test::before
  {
   content: url(./1597910280\(1\).png);
 }

同じ点:

1. 疑似クラス オブジェクト。オブジェクトの前にコンテンツを設定するために使用されます。

##2.::before と :before 書き込みメソッドは同等です

##相違点:

: before は Css2 の記述方法、::before は Css3 の記述方法です。

:before よりも互換性が高くなりますが、H5 開発では ::before の使用を推奨します

手順:

1. 擬似クラス要素は content 属性と一緒に使用する必要があります

2. 擬似クラス要素は CSS レンダリング レイヤーによって追加されますjs を介して操作することはできません

3. 疑似クラス オブジェクトの特殊効果は通常、hover 疑似クラス スタイル

によって有効になります。これは少し役に立たないと思います。それかどうか。

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

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

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

2) 構文の違い

CSS3 では、疑似クラスと疑似要素も文法的に異なり、疑似要素は

::

で始まるように変更されます。ただし、歴史的な理由により、ブラウザーは引き続き

: で始まる疑似要素をサポートしますが、:: で始まる標準形式で記述することをお勧めします。 3) 疑似クラス/疑似要素の一覧

##:active アクティブ化されている要素を選択しますマウスでホバーされている要素を選択します##:link未訪問の要素を選択1:visited選択訪問済み要素1:first-child親要素の最初の子要素である要素を選択します 2:lang指定された lang 属性を持つ要素を選択します2:focusキーボード入力フォーカスのある要素を選択します2:enable有効な各要素を選択します3#無効化された各要素を選択##: :first-letter の最初の単語を選択してください指定された要素

1		:hover
1
	#:disable	##3
:checked	選択した各要素を選択します	3
:target	現在のアンカー ポイント要素を選択します	3
##

1

::first-line::after::before #指定された要素のコンテンツの前にコンテンツを挿入しますユーザーが選択したコンテンツを選択します指定された要素内 ##3

擬似クラスはクラスと同じ優先度を持ち、擬似要素はラベルと同じ優先度を持ちます。ちなみに、優先度の判断方法は、 !重要 > インライン スタイル > ID セレクター > クラス セレクター > ラベル > ワイルドカード > 継承 > ブラウザーのデフォルト属性 が一般的です。簡単な計算方法もあります インラインスタイルシートの重みを1000、IDセレクターの重みを100、クラスセレクターの重みを10、HTMLタグセレクターの重みを1、重みは実際には 10 進数で計算されません。数値表現はアイデアを説明するためのものです。セレクターにルールを追加して重みを比較できます。重みが大きいほど優先順位が高くなります。重みが同じ場合は、前の値が優先されます。スタイルは後のスタイルに置き換えられます。

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

指定された要素を選択します 要素の最初の行	1
指定された要素のコンテンツの後にコンテンツを挿入します	2
#2		::selection

以上がCSS で ::before は何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。