これは私が見ているコードの完全な行であり、そのコンテキストは次のとおりです。
input[type="radio"] + span::before { content: ""; display: inline-block; width: 20px; height: 20px; background: url("sprite.png") no-repeat -20px 0; vertical-align: middle; }
これがどのように機能するかについては十分に理解していますが、span と before の間に 1 つではなく 2 つのコロンがある理由がわかりません。
私が読んだものからの前のセレクターは、1つのコロンを使用する必要があります。
http://www.w3schools.com/cssref/sel_before.asp
w3c では、コロンが 2 つあるセレクターが見つかりません。また、"前" の前にあるコロンに加えて、span の後にコロンが続く理由もわかりません。
CSS セレクター レベル 3仕様で定義されているように、これは疑似要素です。
および疑似要素
::beforeを::after使用して、要素のコンテンツの前または後に生成されたコンテンツを記述することができます。
これは、レベル 2 仕様で定義されている単一コロン構文と事実上同じです。レベル 3 仕様では、疑似要素と疑似クラス (単一のコロンを使用) を区別するために余分なコロンが導入されています。
どちらの構文も新しいブラウザーでは機能しますが、古いブラウザーは新しい::スタイルを認識しません。
さらに詳細については、次のように述べられているレベル 3 仕様の文法を確認できます。
'::' は疑似要素を開始し、':' は疑似クラスを開始します
ここでそれに関する記事を読むことができます
しかし、基本的には、疑似クラスと疑似要素を区別することです。1 つの CSS2 標準とは対照的に、疑似要素に 2 つのコロンを使用するのは CSS3 標準です。
ブラウザーは CSS2 と CSS3 の両方に対応したいため、1 つまたは 2 つのコロンが機能します。