pseudo-elements_html/css_WEB-ITnose の前後の CSS

CSS には、ドキュメント自体を乱すことなく追加要素を追加できる機能があります。これらは CSS セレクターの形式で表示され、ラベルのパフォーマンス効果がありますが、実際のラベル要素ではないため、このように呼ばれます。 「疑似要素」。前後の 2 つの一般的な疑似要素について説明します。

1. 疑似要素の基本的な使用法

次のように、対応する疑似クラス セレクターを CSS セレクターに追加するだけです: #example: before または #example: after、ここでは ID セレクターが使用されます。たとえば、次の CSS コード:

#example:before {  content: "\"";}#example:after {  content: "\"";}

その効果は、サンプル タグの前後に二重引用符を追加することです。

これは擬似クラス セレクターとよく似ていますが、小さな違いがあります。つまり、擬似クラス セレクターは実際には ::before の形式で 2 つのコロンを使用して、擬似クラスと区別します。ただし、ブラウザ内で使用されるコロンは 1 つだけです。CSS3 では、それがコロンであると規定されています。

バインドされたタグがない場合、:before{ content:”=;} のような疑似要素は無意味であり、コードは DOM 内の各要素のコンテンツの前にハッシュ記号を挿入します。

タグとそのコンテンツをすべて削除した場合でも、ページには 2 つのハッシュ シンボルが表示されます。1 つは タグ内にあります。

では、擬似要素に擬似要素を追加することはできるでしょうか?たとえば、次のコード:

#example:after:after{    content: "after";}

ブラウザを更新してテストすると、何も表示されないことがわかります。つまり、擬似要素への擬似要素の追加は、現在多くのブラウザで無効であり、無視されます。この定義では、ブラウザでは1階層の擬似要素しか認識できませんが、擬似要素に擬似要素を追加できるため、擬似要素に擬似要素を追加することが期待でき、表現力が非常に高いです。

2. 疑似要素の属性とスタイル

1.content 属性

各疑似要素には content 属性が必要です。そうでない場合、ブラウザはその値として content 属性に null 参照を追加できます。例: コンテンツ:"")。

CSS に背景画像を含めるのと同じように、コンテンツの画像への URL を含めることもできます:

p:before {  content: url(image.jpg);}

CSS を使用するのと同じように、画像参照の代わりにデータ URI を含めることもできます背景 。

ATRR(X) の関数の形式を選択することもできます。 "の値を返します

上記のコードにより、ページ上のすべての 要素の href 値がそれぞれの 要素の直後に配置されます。ドキュメントを印刷する場合、すべての URL を含む印刷スタイル シートとして使用できます。

2. ラベル属性

擬似要素も要素であるため、位置属性、フォント属性、背景属性、ボックス モデル属性など、他の要素が持つほとんどの属性を追加できます。デフォルトでは内部の Connected 要素であるため、ボックス モデルの高さなどの属性を有効にしたい場合は、それをブロック要素に変換する必要があります。具体的には、表示属性を block に設定するか、float に設定する必要があります。以下の通り:

a:after {  content: attr(href);}

擬似要素は位置などの属性を定義できるため、前後の制約は非常に限定されており、位置や位置の特別な定義がない場合のみデフォルトの動作になります。疑似要素のその他の情報の不一致。before は相対的にバインドされた要素の前に表示され、after は相対的にバインドされた要素の位置の後に表示されます。

さらに、疑似要素のボックス モデルの属性を定義できるため、疑似要素のデフォルトは #example:after などのターゲット要素の子要素であると言う必要があります。 after は #example selector に対応する要素であり、一般的なサブ要素ボックス モデルの特性を持ちます。つまり、それに定義されている高さや幅などの属性ルールがターゲット要素に影響を与えるルールになります。

3. 擬似要素の互換性

擬似要素は互換性が高く、ブラウザプレフィックスを追加しなくても十分に使用できるため、基本的に安心して使用できます。

:before および :after 疑似要素をサポートするブラウザは次のとおりです:

Chrome 2+、

Firefox 3.5+ (3.0 は部分的にサポートされていました)、

Safari 1.3+、

Opera 9.2+、

IE8+ (いくつかのマイナーなバグ)、

ほぼすべてのモバイルブラウザ。

ただし、IE6 と IE7 ではサポートされていません。ユーザー数を気にしない場合は、基本的に自由に使用できます。

4. 疑似要素の役割

ここでは、Thoriq Firdaus のいくつかの例を使用して、疑似要素の使用法について簡単に説明します。また、擬似要素は擬似要素であるため、構造と性能の分離の実現として、その役割はテキストを表現するために使用されるのではなく、テキストを変更することにあるはずです。

シャドウ効果

:before と :after の疑似要素を使用します。どちらも絶対位置に配置され、負の Z インデックスを使用して画像の後ろに配置してシャドウ効果を実現します。

3D ボタン

CSS と 1 つのアンカー テキストのみを使用して、CSS3 ボックス シャドウと組み合わせた疑似要素を使用して、素晴らしい 3D ボタンを描画します。疑似要素: before は、ボタンの左側に数字「1」を追加するために使用されます。

オーバーレイ画像効果

疑似要素を使用して、画像タグのみに基づいて「乱雑な」オーバーレイ画像効果を作成することも可能です。擬似要素は、負の Z インデックス値を使用して実際の画像の背後に「オーバーレイ」画像を作成することにより、画像が重なっているような錯覚を作り出すために使用されます。