Due regole CSS per :: colore del testo di selezione: perché non possono essere selezionate contemporaneamente?

Question

Il codice per modificare il colore del testo ::selection funziona bene se scritto nel seguente modo:

HTML:

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

CSS:

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

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

Ma, se ho posto le due regole CSS sulla stessa riga come di seguito, non funziona:

HTML:

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

CSS:

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

Perché questo non funziona? Qual è la regola per scrivere due diverse regole CSS nella stessa riga?

Answer 1

"Qual è la regola per scrivere due regole CSS diverse nella stessa riga?"

In genere, la selezione multipla come si è tentato in precedenza (con il separatore di virgola) va bene, ad es.

div, p { 
    background-color:red;  
} 

---

"Perché questo non funziona?"

Nel caso ::selection, tuttavia, le cose sono un po 'diverse.

Date un'occhiata a the following quote from Mozilla per quanto riguarda il ragionamento che sta dietro perché questo non funziona come ci aspettiamo che di solito:

"A causa del fatto che le regole CSS di analisi richiedono far cadere l'intero regola quando incontra un pseudo-elemento non valido, deve essere scritto due regole separate :. ::-moz-selection, ::selection {...} La regola sarebbe essere lasciato cadere sui browser non Gecko come ::-moz-selection non è valida su di loro ".

Answer 2

Questo perché ::selection non è valido per Gecko e ::-moz-selection non è valido per altri. Pertanto, quando si scrive p::selection, p::-moz-selection, ciascun browser trova il selettore non valido e ignora l'intera regola a causa delle regole di analisi CSS.