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

Question

Có điều 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ố yếu tố đầu vào, tôi cần làm mất hiệu lực 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 từ CSS.

Tôi có thể làm như thế nào?

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

input.mod { 
... 
... 
} 

Answer 1

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

Ví 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 ý: workaround này không còn 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 thành phần và sau đó đặt lại kiểu đó với một lớp.

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

Answer 2

Bạn cũng có thể làm điều đó bằng 'quay trở lại' những thay đổi trên lớp reset chỉ trong CSS.

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

Answer 3

CSS3 có :not(), nhưng chưa được triển khai trong tất cả các trình duyệt. Tuy nhiên, nó được thực hiện trong IE9 Platform Preview.

input:not(.reset) { } 

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

Trong khi đó, bạn sẽ phải dính vào các phương pháp cũ.

Answer 4

thay vì class = "reset" bạn có thể đảo ngược logic bằng cách có class = "hợp lệ" Bạn có thể thêm này theo mặc định và loại bỏ các 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"/> 

Answer 5

Thú vị chỉ cố gắng này để lựa chọn phần tử DOM sử dụng JQuery và nó hoạt động!:)

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

Trang này có 168 div mà không có lớp 'bình luận sao y bản chính'

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

Answer 6

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

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%.