pseudo-elements_html/css_WEB-ITnose の前後の CSS-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:35:57

オリジナル

1176 人が閲覧しました

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 疑似要素をサポートするブラウザは次のとおりです: