Eşit olmayan bir CSS seçici var mı?

CSS'de! = (Eşit değil) gibi bir şey var mı? örneğin, aşağıdaki koda sahibim:

input {
 ... 
 ...
}

ama bazı girdiler için bunu geçersiz kılmam gerekiyor. Bunu, giriş etiketine "reset" sınıfını ekleyerek yapmak istiyorum, örneğin

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

ve sonra bu etiketi CSS'den atlayın.

Bunu nasıl yapabilirim?

Görebilmemin tek yolu, giriş etiketine bir sınıf eklemek ve CSS'yi aşağıdaki gibi yeniden yazmaktır:

input.mod {
 ...
 ...
}

CSS3'te, :not()filtreyi kullanabilirsiniz , ancak henüz tüm tarayıcılar CSS3'ü tam olarak desteklemiyor, bu nedenle , şu anda tüm büyük tarayıcılar tarafından desteklenen (ve epeydir bu eski bir cevaptır) ne yaptığınızı bildiğinizden emin olun. ...).

Misal:

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

ve CSS

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

Not: Bu geçici çözüm artık gerekli olmamalı; Bağlam için burada bırakıyorum.

CSS3 kullanmak istemiyorsanız, stili tüm öğeler üzerinde ayarlayabilir ve ardından bir sınıfla sıfırlayabilirsiniz.

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

Bunu, sıfırlama sınıfındaki değişiklikleri yalnızca CSS'de "geri döndürerek" de yapabilirsiniz.

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

CSS3 var :not(), ancak henüz tüm tarayıcılarda uygulanmadı. Bununla birlikte, IE9 Platform Önizlemesinde uygulanmaktadır.

input:not(.reset) { }

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

Bu arada, eski moda yöntemlere bağlı kalmanız gerekecek.

Buna, aşağıdaki gibi bir özelliği hedefleyerek de yaklaşabilirsiniz:

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

Bu durumda, 'onay kutusu' tipi olmayan tüm girişlerin genişliği% 100 olacaktır.

İlginç olan, JQuery kullanarak DOM öğesini seçmek için bunu denedi ve işe yarıyor! :)

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

Bu sayfada 'açıklama-kopya' sınıfı olmayan 168 div vardır.

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

class = "reset" yerine, class = "valid" ile mantığı tersine çevirebilirsiniz Bunu varsayılan olarak ekleyebilir ve stili sıfırlamak için sınıfı kaldırabilirsiniz.

Yani sizin örneğinizden ve Tomas'ın

input.valid {
 ... 
 ...
}

ve

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