Tại sao không thể kết hợp các phần tử / lớp giả cụ thể của nhà cung cấp vào một bộ quy tắc?

Trong CSS, có thể tạo kiểu cho placeholdervăn bản trong một đầu vào bằng cách sử dụng kết hợp các lớp giả và phần tử giả dành riêng cho nhà cung cấp (để có được mức độ bao phủ trên nhiều trình duyệt tốt nhất).

Tất cả đều có chung các thuộc tính cơ bản (ví dụ: khai báo kiểu văn bản và màu sắc).

Tuy nhiên, mặc dù tôi chắc chắn muốn áp dụng các kiểu giống nhau bất kể nhà cung cấp trình duyệt, nhưng dường như không thể kết hợp các kiểu này với nhau thành một bộ chọn được phân tách bằng dấu phẩy (như bạn làm với bất kỳ đoạn CSS nào khác mà bạn muốn hai bộ chọn chia sẻ các kiểu giống nhau).

Ví dụ: tôi có xu hướng nhắm mục tiêu kiểu trình giữ chỗ bằng cách sử dụng bốn bộ chọn sau:

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-webkit-input-placeholder

(mặc dù :-moz-placeholder việc này không được dùng nữa vì ::-moz-placeholderđiều này chỉ xảy ra với việc phát hành FireFox 19 nên hiện tại, cả hai đều cần thiết để hỗ trợ trình duyệt tốt hơn).

Điều khó chịu là việc khai báo và đưa ra mỗi kiểu (giống nhau) dẫn đến nhiều sự lặp lại trong CSS.

Vì vậy, để đảm bảo rằng văn bản giữ chỗ được căn phải và nghiêng, tôi sẽ kết thúc bằng:

input:-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input::-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input:-ms-input-placeholder{
    font-style: italic;
    text-align: right;
}
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

Điều tôi thực sự muốn làm là kết hợp chúng thành một bộ quy tắc được phân tách bằng dấu phẩy như sau:

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

Tuy nhiên, mặc dù đã thử điều này trong một vài dịp công bằng, điều này dường như không bao giờ hiệu quả. Nó khiến tôi lo ngại rằng có một số phần cơ bản của CSS mà tôi không hiểu.

Ai có thể làm sáng tỏ lý do tại sao điều này xảy ra?

CSS2.1 cho biết :

Bộ chọn (xem thêm phần trên bộ chọn ) bao gồm mọi thứ cho đến (nhưng không bao gồm) dấu ngoặc nhọn đầu tiên bên trái ({). Một bộ chọn luôn đi cùng với một khối khai báo. Khi tác nhân người dùng không thể phân tích cú pháp bộ chọn (tức là nó không phải là CSS 2.1 hợp lệ), nó cũng phải bỏ qua bộ chọn và khối khai báo sau (nếu có).

Lưu ý rằng vì CSS2.1 có trước CSS3 nên "CSS 2.1 không hợp lệ" được viết dưới giả định rằng tác nhân người dùng hoàn toàn tuân thủ CSS2.1 và CSS3 không tồn tại trên lý thuyết. Trong thực tế, bất cứ nơi nào thông số cho biết "nó không phải là CSS hợp lệ" hoặc một cái gì đó có hiệu lực, nó phải được hiểu là "nó không được tác nhân người dùng hiểu". Xem câu trả lời của tôi cho câu hỏi liên quan này để có lời giải thích sâu hơn.

Cụ thể, vì trình duyệt của một nhà cung cấp không hiểu tiền tố của nhà cung cấp khác, nên nó phải loại bỏ bất kỳ quy tắc nào có chứa các tiền tố không được nhận dạng đó trong bộ chọn lớp giả và phần tử giả. ¹

Để biết một số hiểu biết về lý do tại sao một quy tắc như vậy được đưa ra, hãy xem câu trả lời này .

¹ _{Lưu ý rằng WebKit nổi tiếng là làm nổi một phần quy tắc này: nó không gặp khó khăn khi phân tích cú pháp các quy tắc mà bộ chọn có phần tử giả tiền tố không được công nhận (trong trường hợp này là ::-moz-placeholder). Điều đó nói rằng, lớp :-moz-placeholdergiả trong quy tắc kết hợp của bạn sẽ khiến nó bị phá vỡ.}

Các thông số kỹ thuật nói rằng nếu tác nhân người dùng không nhận ra một phần của bộ chọn, nó phải bỏ qua toàn bộ bộ chọn và khối của nó.

http://www.w3.org/TR/css3-syntax/#rule-sets

Bộ chọn (xem mô-đun Bộ chọn [SELECT]) bao gồm mọi thứ cho đến (nhưng không bao gồm) dấu ngoặc nhọn đầu tiên bên trái ({). Một bộ chọn luôn đi cùng với một {} -block. Khi tác nhân người dùng không thể phân tích cú pháp bộ chọn (tức là nó không phải là CSS3 hợp lệ), nó cũng phải bỏ qua khối {} -block.