Dwie reguły CSS dla :: koloru tekstu selekcji - dlaczego nie można ich wybrać w tym samym czasie?

Question

Kod zmienić ::selection kolor tekstu działa dobrze, jeśli napisane w następujący sposób:

HTML:

<p>This is a paragraph.</p> 

CSS:

p::selection { // This works 
    color:#ff0000; 
} 

p::-moz-selection { // This works 
    color:#ff0000; 
} 

Ale jeśli I miejsce dwie reguły CSS na tej samej linii, jak poniżej, to nie działa:

HTML:

<p>This is a paragraph.</p> 

CSS:

p::selection, p::-moz-selection { // // This does not work 
    color:#ff0000; 
} 

Dlaczego to nie działa? Jaka jest reguła pisania dwóch różnych reguł CSS w tej samej linii?

Answer 1

"Jaka jest reguła pisania dwóch różnych reguł CSS w tej samej linii?"

Zazwyczaj wielokrotny wybór, jak próbowano powyżej (przy użyciu seperatora przecinków), jest w porządku, np.

div, p { 
    background-color:red;  
} 

---

"Dlaczego to nie działa?"

W przypadku ::selection sprawy wyglądają jednak nieco inaczej.

Spójrz na the following quote from Mozilla co do rozumowania za dlaczego to nie działa jak my zazwyczaj spodziewać się go do:

„Ze względu na fakt, że zasady CSS wymagają analizowania spada cała w przypadku napotkania niepoprawnego pseudoelementu, dwie odrębne reguły muszą być zapisane: ::-moz-selection, ::selection {...}. Reguła zostanie usunięta z na przeglądarkach innych niż Gecko, ponieważ ::-moz-selection jest niepoprawna na . "

Answer 2

Dzieje się tak, ponieważ ::selection jest nieważne dla Gecko, a ::-moz-selection jest nieprawidłowe dla innych. Tak więc, gdy napiszesz p::selection, p::-moz-selection, każda przeglądarka znajdzie niepoprawny selektor i odrzuci całą regułę z powodu reguł parsowania CSS.