擬似要素のスタイル優先

Question

私は擬似要素のスタイルで遊んと

は、次のCSSとhtml

HTML考えてみましょう私を困惑行動に出くわした：

<p> 
     Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::. 
    </p> 

とスタイルを

p::first-letter { 
    font-size: 20px; 
    color: red; 
} 

p::first-line { 
    font-variant: small-caps; 
    color: green; 
} 

p::before { 
    content: 'Start'; 
    color: blue; 
} 

Chromeでは、次のような動作があります。 pと：beforeスタイルの内容が青色に色を上書きしないにもかかわらず、tは赤色に着色されます。また

そこには文字がコンテンツの前に::ではないと私はそこ&または*を置く - すべての最初の行には、緑と全くなっていない::最初の文字と::をスタイルが適用される前に。

Firefoxでは提供されているコードの結果は以下のようになります：

私は誰もが理由を説明でき::コンテンツは他で選択される前に、Ubuntuの17.04

の下で、最新バージョンのブラウザを使用しています擬似要素セレクタが適用され、スタイルが適用されています。なぜなら、own :: beforeスタイルは「後で」スタイルであってもそれらを上書きしません。

Answer 1

最初の行と最初の文字については、これは実際には特異性の問題ではありません。定期的な要素の内容と同様に

、 の生成されたコンテンツ:: beforeと：：それは、ちょうどこのように指定されます擬似要素は、任意の に含まれていてもよい後::最初の行と::初段元の要素の に適用された文字の擬似要素。

（source）