Apakah ada CSS tidak sama dengan pemilih?

Apakah ada sesuatu seperti! = (Tidak sama) di CSS? misalnya, saya memiliki kode berikut:

input {
 ... 
 ...
}

tetapi untuk beberapa masukan, saya perlu membatalkan ini. Saya ingin melakukannya dengan menambahkan kelas "reset" ke tag masukan, misalnya

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

lalu lewati tag ini dari CSS.

Bagaimana saya bisa melakukan itu?

Satu-satunya cara yang bisa saya lihat adalah dengan menambahkan beberapa kelas ke tag input, dan menulis ulang CSS sebagai berikut:

input.mod {
 ...
 ...
}

Di CSS3, Anda dapat menggunakan :not()filter, tetapi belum semua browser mendukung CSS3 sepenuhnya, jadi pastikan Anda tahu apa yang Anda lakukan yang sekarang didukung oleh semua browser utama (dan sudah cukup lama; ini adalah jawaban lama. ...).

Contoh:

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

dan CSS

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

Catatan: solusi ini seharusnya tidak diperlukan lagi; Saya tinggalkan di sini untuk konteks.

Jika Anda tidak ingin menggunakan CSS3, Anda dapat menyetel gaya pada semua elemen, lalu menyetel ulang dengan kelas.

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

Anda juga dapat melakukannya dengan 'mengembalikan' perubahan pada kelas reset hanya di CSS.

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

CSS3 memiliki :not(), tetapi belum diterapkan di semua browser. Namun, ini diterapkan di Pratinjau Platform IE9.

input:not(.reset) { }

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

Sementara itu, Anda harus tetap berpegang pada metode kuno.

Anda juga dapat melakukan pendekatan ini dengan menargetkan atribut seperti ini:

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

Dalam hal ini semua input yang bukan tipe 'kotak centang' akan memiliki lebar 100%.

Menarik, baru saja mencoba ini untuk memilih elemen DOM menggunakan JQuery dan berhasil! :)

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

Halaman ini memiliki 168 div yang tidak memiliki kelas 'copy-komentar'

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

alih-alih class = "reset" Anda bisa membalikkan logika dengan memiliki class = "valid" Anda dapat menambahkan ini secara default dan menghapus kelas untuk menyetel ulang gaya.

Jadi dari teladanmu dan Tomas '

input.valid {
 ... 
 ...
}

dan

<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"/>