Czy CSS nie jest równy selektorowi?

Question

Czy jest coś takiego! = (Nie równy) w CSS? przykład, mam następujący kod:

input { 
... 
... 
} 

ale dla niektórych wejść muszę unieważnić ten. 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, widzę byłoby dodać klasę do znacznika wejściowego, a przepisać CSS następująco:

input.mod { 
... 
... 
} 

Answer 1

W CSS3, można użyć filtru :not(), ale nie wszystkie przeglądarki obsługują CSS3 jeszcze w pełni, więc upewnij się, że wiesz, co robisz który jest teraz supported by all major browsers (a było już od jakiegoś czasu, to jest 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 rozwiązanie nie powinno być konieczne więcej; Zostawiam to tutaj dla kontekstu.

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

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

Answer 2

Można również zrobić poprzez „powrotu” zmiany na klasy resetowania tylko w CSS.

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

Answer 3

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

input:not(.reset) { } 

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

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

Answer 4

zamiast class = „reset” można odwrócić logikę poprzez class = „valid” Możesz dodać ten domyślnie i usunąć klasę zresetować styl.

Więc z przykładu i Tomas'

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

Answer 5

Ciekawe tylko próbował tego wyboru elementu DOM przy użyciu jQuery i to działa!:)

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

Ta strona posiada 168 DIV, który nie posiada klasę 'comment-kopia'

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

Answer 6

Można też podejść do tego poprzez ukierunkowanie atrybut tak:

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

W tym przypadku wszystkie wejścia, które nie mają typu "pole wyboru" będą miały szerokość 100%.