Chỉ định nhiều bộ chọn thuộc tính trong CSS

Cú pháp để làm một cái gì đó như:

input[name="Sex" AND value="M"]

Về cơ bản, tôi muốn chọn inputphần tử có thuộc tính name="Sex"cũng như thuộc tính value="M":

<input type="radio" name="Sex" value="M" />

Các yếu tố như sau không nên được chọn:

<input type="radio" name="Sex" value="F" />

Đơn giản input[name=Sex][value=M]sẽ làm khá tốt đẹp. Và nó thực sự được mô tả tốt trong tài liệu tiêu chuẩn :

Nhiều bộ chọn thuộc tính có thể được sử dụng để chỉ một số thuộc tính của một thành phần hoặc thậm chí nhiều lần cho cùng một thuộc tính.

Ở đây, bộ chọn khớp với tất cả các thành phần SPAN có thuộc tính "hello" có chính xác giá trị "Cleveland" và thuộc tính "tạm biệt" có chính xác giá trị "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Là một lưu ý phụ, chỉ sử dụng dấu ngoặc kép quanh một giá trị thuộc tính nếu giá trị này không phải là định danh hợp lệ.

Trình diễn JSFiddle

Để nối nó:

input[name="Sex"][value="M"] {}

Và để liên minh, đó là:

input[name="Sex"], input[value="M"] {}

Ghép các bộ chọn thuộc tính:

input[name="Sex"][value="M"]

Chỉ cần thêm rằng không nên có khoảng cách giữa bộ chọn và khung mở.

td[someclass] 

sẽ làm việc. Nhưng

td [someclass] 

sẽ không.

[class*="test"],[class="second"] {
background: #ffff00;
}