Hai quy tắc CSS cho :: màu văn bản lựa chọn - Tại sao chúng không thể được chọn cùng một lúc?

Question

Các mã để thay đổi màu sắc văn bản ::selection hoạt động tốt nếu viết theo cách sau:

HTML:

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

CSS:

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

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

Nhưng, nếu tôi đặt hai quy tắc CSS trên cùng một dòng như dưới đây, nó không hoạt động:

HTML:

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

CSS:

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

Tại sao điều này không làm việc? Quy tắc để viết hai quy tắc CSS khác nhau trong cùng một dòng là gì?

Answer 1

"Quy tắc viết hai quy tắc CSS khác nhau trong cùng một dòng là gì?"

Thông thường, nhiều lựa chọn như bạn đã thử ở trên (với dấu phẩy) là tốt, ví dụ:

div, p { 
    background-color:red;  
} 

---

"Tại sao điều này không làm việc?"

Tuy nhiên, trong trường hợp của ::selection, mọi thứ hơi khác một chút.

Hãy xem the following quote from Mozilla như lý do đằng sau lý do tại sao điều này không làm việc như chúng ta thường mong đợi nó để:

"Do thực tế rằng các quy tắc CSS phân tích đòi hỏi phải thả toàn bộ quy tắc khi gặp phải phần tử giả không hợp lệ, hai quy tắc riêng biệt phải được viết: ::-moz-selection, ::selection {...}. Quy tắc sẽ bị bỏ trên trình duyệt không phải Gecko là ::-moz-selection không hợp lệ trên chúng. "

Answer 2

Điều này là do ::selection không hợp lệ đối với Gecko và ::-moz-selection không hợp lệ đối với những người khác. Vì vậy, khi bạn viết p::selection, p::-moz-selection, mỗi trình duyệt sẽ tìm thấy bộ chọn không hợp lệ và loại bỏ toàn bộ quy tắc vì các quy tắc phân tích CSS.