pseudoelementy style priorytet

Question

grałem z pseudo-elementy stylów i natknąłem się na zachowania, które mnie zastanawiało

Rozważmy następujący CSS i 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> 

i style

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

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

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

W Chrome zachowanie jest następujące: Pierwsza litera :: before conten t ma kolor czerwony, mimo że nie zawiera treści p i :: before style nie nadpisują koloru na niebieski.

Również gdy nie ma literę :: przed zawartością i kładę & lub * istnieje - wszystko first-line staje się zielony i nie :: first-letter i :: przed stylów stosowane.

W Firefoksie wynikiem kodu przewidzianego byłby następujący:

Używam najnowszych wersji przeglądarek pod Ubuntu 17.04

Więc może ktoś wyjaśnić dlaczego :: przed treścią jest wybrany przez inny selektory pseudoelementów i zastosowane style oraz dlaczego własność :: before styles nie nadpisuje ich, mimo że są one "późniejszymi" stylami.

Answer 1

Co do pierwszego wiersza i pierwszej litery, nie jest to tak naprawdę problem specyficzności. To jest po prostu określona następująco:

Jak z zawartością elementów stałych, wygenerowany zawartość :: before i: after pseudo-elementy mogą być zawarte w dowolnym :: first-line i :: studiów pierwszego pseudoelementy literowe zastosowane do elementu początkowego .

(source)