Lệnh OR trong bộ chọn CSS

Question

Có thể sử dụng bộ chọn CSS như a[href^="http:"], a[href^="mailto:"] để khớp tất cả các liên kết bên ngoài và thư trong tài liệu, nhưng có cách sử dụng câu lệnh "hoặc" trong phần trích dẫn của bộ chọn như sau: a[href^="(http|mailto):"]?

Answer 1

Theo như tôi có thể nói, không có cách nào để làm những gì bạn đang yêu cầu. Trong thông số bộ chọn CSS, ký tự ống được sử dụng cho một cái gì đó khác khi được sử dụng với bộ chọn thuộc tính. Nó được sử dụng như một dấu phân tách không gian tên.

mỗi spec selector trên W3C:

Tên thuộc tính trong một selector thuộc tính được đưa ra như một CSS tên đủ điều kiện: một tiền tố namespace đã được khai báo trước chưa thêm vào phía trước tên thuộc tính được phân tách bằng không gian tên dấu tách "thanh dọc" (|). Để phù hợp với không gian tên trong đề xuất XML, các không gian tên mặc định không áp dụng cho các thuộc tính, do đó các bộ chọn thuộc tính không có thành phần vùng tên chỉ áp dụng cho các thuộc tính không có không gian tên (tương đương với "| attr"; các thuộc tính này nằm trong "không gian tên loại phần tử mỗi phần tử "). Dấu hoa thị có thể được sử dụng cho tiền tố không gian tên cho biết rằng công cụ chọn phải khớp với tất cả các tên thuộc tính mà không có liên quan đến không gian tên của thuộc tính.

CSS examples: 

@namespace foo "http://www.example.com"; 
[foo|att=val] { color: blue } 
[*|att] { color: yellow } 
[|att] { color: green } 
[att] { color: green } 

Nguyên tắc đầu tiên sẽ phù hợp với chỉ các yếu tố với att thuộc tính trong "http://www.example.com" namespace với giá trị "val".

Quy tắc thứ hai sẽ chỉ khớp với các phần tử có thuộc tính att bất kể không gian tên của thuộc tính (bao gồm không có vùng tên).

Hai quy tắc cuối cùng là tương đương và sẽ phù hợp với chỉ các yếu tố với các att thuộc tính mà các thuộc tính không phải là trong một không gian tên.

Nguồn: http://www.w3.org/TR/selectors/#attrnmsp

Answer 2

Tôi đã kiểm tra ngữ pháp CSS Selectors, nhưng có vẻ như cách duy nhất để làm điều này là với các dấu phân cách dấu phẩy:

selectors_group 
    : selector [ COMMA S* selector ]* 

Ngoài ra, đây là một số có liên quan từ vựng quy tắc:

{w}"+"   return PLUS; 
{w}">"   return GREATER; 
{w}","   return COMMA; 
{w}"~"   return TILDE; 

Không có VÀ cũng không HOẶC quy tắc, nhưng có một điều tôi nhận thấy là họ có phủ định:

"{N}{O}{T}"(" return NOT;) 

http://www.w3.org/TR/selectors/#w3cselgrammar