2011-09-06 20 views
47

::beforeタグを含むCSSコードを見ました。私は::beforeが何であるか見るためにMDNを見ましたが、私はそれを本当に理解しませんでした。誰かがそれがどのように動作するか説明できますか? CSSで選択する前にDOM要素を作成しますか?beforeとbeforeの違いは何ですか?

+1

に記載されています。 –

+5

...そして、二重コロン表記はIE8では実装されていないので、 ':: before'を使い始める前に、(2016年のように)市場から流されるまで待たなければなりません。素晴らしい仕事、Microsoft '-.-' –

+1

疑似要素はCSS1以来存在しています。最初の疑似要素は ':first-letter'と':first-line'でした。 – BoltClock

答えて

12

これは、疑似要素を疑似クラスと区別します。

擬似クラスと擬似要素との間の差は私の知る限り、CSSワーキンググループは一つだけコロンを有する擬似クラスと区別するために付加的なコロンと擬似要素をプレフィックスすることを決定しhttp://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html

+3

擬似クラスと擬似要素の区別を確立するために、:: before記法(2つのコロンで)がCSS3で導入されました。ブラウザは、CSS2で導入される前の表記法も受け入れます。ソース:https://developer.mozilla。org/en-US/docs/Web/CSS/:: beforeこれまでのように、擬似クラスではなく、擬似クラス(hover)ではなく、2つのコロンが良い(したがってCSS3標準に従う)。 – JoostS

35

それらのドキュメントによれば、それらは等価である:1つのコロンは、レガシーバージョンである一方

element:before { style properties } /* CSS2 syntax */ 

element::before { style properties } /* CSS3 syntax */ 

唯一の違いは、二重コロンをCSS3で使用されることです。

推論:

::表記は擬似クラスと擬似要素間 識別を確立するためにCSS 3に導入される前に。ブラウザ も、CSS 2で導入された前の表記を受け入れます。

5

これらは本質的に同じことを意味します。 ::は、擬似要素(:beforeと:afterなど)と擬似クラス(linkや:hoverなど)を区別するのに役立つCSS3に導入されました。

3

私はMDNw3.orgをチェックアウトし、私が思い付くことが最高の::構造変更のために使用されていることである、と:スタイリングのために使用されています。

互換性のため、現在互換性があります。

構造変化である):beforeから、そのスタイル<a>、(例えば):linkを分離するように見えます。

:はスタイリング用、::は構造用です。