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 {
...
...
}
html
css
css-selectors
Alex Ivasyuv
źródło
źródło
Odpowiedzi:
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:
i CSS
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.
źródło
:not()
selektorów:input:not(.avoidme):not(.avoidmetoo)
uniknie elementów z każdą klasą,input:not(.avoidme.andme)
uniknie elementów z obiema klasami.:not(.this.that) { }
praca może, ale jeśli coś takiego jak:not(.this, .that) { }
będziesz spadać w dół, trzeba ŁAŃCUCHOWEGO nich, takie jak::not(.this):not(.that)
. Rozumiem, że prawdopodobnie to wiesz, staram się pomóc przyszłym czytelnikom :):not()
.Możesz to również zrobić, „cofając” zmiany w klasie resetowania tylko w CSS.
źródło
CSS3 ma
:not()
, ale nie jest jeszcze zaimplementowany we wszystkich przeglądarkach. Jest jednak zaimplementowany w wersji zapoznawczej platformy IE9.http://www.w3.org/TR/css3-selectors/#negation
W międzyczasie będziesz musiał trzymać się staromodnych metod.
źródło
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%.
źródło
Ciekawe właśnie wypróbowałem to do wyboru elementu DOM za pomocą JQuery i działa! :)
Ta strona zawiera 168 elementów div, które nie mają klasy „comment-copy”
źródło
[attr!="value"]
jest selektorem tylko dla jQuery api.jquery.com/attribute-not-equal-selectorzamiast 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
i
źródło