Czy istnieje selektor CSS nie równa się?

Czy istnieje coś takiego jak! = (Nierówne) w CSS? np. mam następujący kod:

input {
 ... 
 ...
}

ale dla niektórych wejść muszę to unieważnić. Chciałbym to zrobić dodając klasę „reset” do tagu wejściowego, np

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

a następnie po prostu pomiń ten tag z CSS.

Jak mogę to zrobić?

Jedynym sposobem, jaki widzę, byłoby dodanie klasy do tagu wejściowego i przepisanie CSS w następujący sposób:

input.mod {
 ...
 ...
}

W CSS3 możesz użyć :not()filtru, ale nie wszystkie przeglądarki jeszcze w pełni obsługują CSS3, więc upewnij się, że wiesz, co robisz, co jest teraz obsługiwane przez wszystkie główne przeglądarki (i jest od dłuższego czasu; to stara odpowiedź ...).

Przykład:

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

i CSS

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

Uwaga: to obejście nie powinno już być konieczne; Zostawiam to tutaj dla kontekstu.

Jeśli nie chcesz używać CSS3, możesz ustawić styl dla wszystkich elementów, a następnie zresetować go za pomocą klasy.

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

Możesz to również zrobić, „cofając” zmiany w klasie resetowania tylko w CSS.

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

CSS3 ma :not(), ale nie jest jeszcze zaimplementowany we wszystkich przeglądarkach. Jest jednak zaimplementowany w wersji zapoznawczej platformy IE9.

input:not(.reset) { }

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

W międzyczasie będziesz musiał trzymać się staromodnych metod.

Możesz również podejść do tego, kierując na atrybut taki jak ten:

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

W tym przypadku wszystkie dane wejściowe, które nie są typu „pole wyboru”, będą miały szerokość 100%.

Ciekawe właśnie wypróbowałem to do wyboru elementu DOM za pomocą JQuery i działa! :)

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

Ta strona zawiera 168 elementów div, które nie mają klasy „comment-copy”

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

zamiast class = "reset" możesz odwrócić logikę, ustawiając class = "valid" Możesz dodać to domyślnie i usunąć klasę, aby zresetować styl.

Więc z twojego przykładu i Tomasa

input.valid {
 ... 
 ...
}

i

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