css dấu phẩy selectors tách ra không có tác dụng đối với hình thức đầu vào: không (...)

Question

CSS:

form input:not([type='button']),form input:not([type='submit']) { width: 200px } 

HTML:

<form> 
    <input type='button' value='button' /> 
    <input type='submit' value='submit' /> 
    <input type='text' value='text' /> 
</form> 

Demo: http://jsbin.com/imibew/edit#javascript,html,live

Số phát hành: tất cả các yếu tố đầu vào đang nhận được chiều rộng 200px, nơi tôi chỉ muốn đầu vào của văn bản loại có 200px.

Quirk: nếu bạn chỉ liệt kê một bộ chọn trong và không có danh sách được phân cách bằng dấu phẩy, danh sách sẽ hoạt động chính xác.

Câu hỏi: Tôi có thể sử dụng dấu phẩy khi sử dụng: not() trong CSS không? Sử dụng danh sách trong bộ chọn có vẻ như phá vỡ nó.

Answer 1

Dấu phẩy thể hiện cú pháp OR hợp lý trong cú pháp chọn. Do đó, mỗi phần tử sẽ được so khớp với từng phần của bộ chọn của bạn và nếu nó thỏa mãn ít nhất một trong các phần đó, quy tắc sẽ được áp dụng.

Vì vậy, trong trường hợp của bạn, đây là những gì sẽ xảy ra:

1. Các input[type='button'] sẽ phù hợp với selector form input:not([type='submit']) bạn

2. Các input[type='submit'] sẽ phù hợp với selector form input:not([type='button']) bạn

3. Các input[type='text'] sẽ (rõ ràng) khớp với cả hai bộ chọn

Đó là lý do quy tắc của bạn được áp dụng cho tất cả đầu vào biểu mẫu của bạn.

Nếu bạn muốn kết hợp cả hai phủ nhận, chuỗi chúng như vậy, thay vì sử dụng một danh sách bằng dấu phẩy:

form input:not([type='button']):not([type='submit']) { width: 200px }