Có bộ chọn CSS không bằng không?

Có cái gì đó giống như! = (Không bằng) trong CSS không? ví dụ: tôi có mã sau:

input {
 ... 
 ...
}

nhưng đối với một số đầu vào, tôi cần phải loại bỏ điều này. Tôi muốn làm điều đó bằng cách thêm lớp "đặt lại" vào thẻ đầu vào, ví dụ:

<input class="reset" ... />

và sau đó chỉ cần bỏ qua thẻ này khỏi CSS.

Làm thế nào tôi có thể làm điều đó?

Cách duy nhất tôi có thể thấy là thêm một số lớp vào thẻ đầu vào và viết lại CSS như sau:

input.mod {
 ...
 ...
}

Trong CSS3, bạn có thể sử dụng :not()bộ lọc, nhưng không phải tất cả các trình duyệt đều hỗ trợ đầy đủ CSS3, vì vậy hãy đảm bảo rằng bạn biết mình đang làm gì , hiện đã được hỗ trợ bởi tất cả các trình duyệt chính (và đã khá lâu rồi; đây là một câu trả lời cũ ...).

Thí dụ:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

và CSS

input:not(.avoidme) { background-color: green; }

Lưu ý: cách giải quyết này sẽ không cần thiết nữa; Tôi để nó ở đây cho ngữ cảnh.

Nếu bạn không muốn sử dụng CSS3, bạn có thể đặt kiểu trên tất cả các phần tử, sau đó đặt lại nó bằng một lớp.

input { background-color: green; }
input.avoidme { background-color: white; }

Bạn cũng có thể làm điều đó bằng cách 'hoàn nguyên' các thay đổi trên lớp đặt lại chỉ trong CSS.

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

CSS3 có :not(), nhưng nó chưa được triển khai trên tất cả các trình duyệt. Tuy nhiên, nó được triển khai trong Bản xem trước nền tảng IE9.

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

Trong khi chờ đợi, bạn sẽ phải tuân theo các phương pháp cổ điển.

Bạn cũng có thể tiếp cận điều này bằng cách nhắm mục tiêu một thuộc tính như sau:

input:not([type=checkbox]){ width:100%; }

Trong trường hợp này, tất cả các đầu vào không phải là loại 'hộp kiểm' sẽ có chiều rộng là 100%.

Điều thú vị là vừa thử điều này để chọn phần tử DOM bằng JQuery và nó hoạt động! :)

$("input[class!='bad_class']");

Trang này có 168 div không có lớp 'comment-copy'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

thay vì class = "reset", bạn có thể đảo ngược logic bằng cách đặt class = "valid". Bạn có thể thêm lớp này theo mặc định và xóa lớp để đặt lại kiểu.

Vì vậy, từ ví dụ của bạn và Tomas '

input.valid {
 ... 
 ...
}

và

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>