ここに2つのコロンがあるのはなぜですか？またがる::

Question

前に、これは私が見ているコードのフルラインであり、ここではその文脈である：http://acidmartin.wordpress.com/2011/02/24/custom-crossbrowser-styling-for-checkboxes-and-radio-buttons

input[type="radio"] + span::before { content: ""; display: inline-block; width: 20px; height: 20px; background: url("sprite.png") no-repeat -20px 0; vertical-align: middle; } 

私はこれがどのように動作するかのまともな理解を持っているが、私は理由を理解していませんスパンと前の間に1つではなく、2つのコロンがあります。

私が読んだ先のセレクタは、コロンを使うべきです。 W3Cで

http://www.w3schools.com/cssref/sel_before.asp

、私は2つのコロンを持っているすべてのセレクタを見つけることができない、またスパンが「前に」前のコロンに加え、次のようにコロンを持っているでしょう、なぜ私が把握することができます。

http://www.w3.org/TR/CSS2/selector.html

Answer 1

CSS Selectors Level 3仕様で定義されたように、それは、擬似要素だ：::beforeと::after擬似要素は、要素の内容の前または後に生成されたコンテンツを記述するために使用することができる

。

これは、レベル2仕様で定義されているシングルコロン構文と事実上同じです。レベル3の仕様では、擬似要素と疑似クラス（単一のコロンを使用する）を区別するために余分なコロンが導入されています。

どちらの構文も新しいブラウザでは機能しますが、古いブラウザでは新しい::スタイルは認識されません。

---

は、さらに詳しくは、あなたが述べてレベル3の仕様、からgrammarを見ることができます。

を「::」擬似要素を、開始します「：」疑似クラスを

Answer 2

あなたはそれhere

についての記事を読むことができます。しかし、基本的には、擬似クラスと擬似要素を区別することです。擬似要素に2つのコロンを使用するのはcss3標準です.1つだけのCSS2標準に反します。

コロンが動作する

つまたは2つのブラウザはCSS2とCSS3の両方に応えるためにしたいと