Spójrz na selektor negacji CSS3 (NOT)
CSS ma kilka selektorów, które pozwalają wybrać elementy w pewnych warunkach, takich jak :wahać się, :skupiać, :aktywny, itd. Jednak dzisiaj nie będziemy obejmować tych selektorów. Przyjrzymy się jednemu, który jest wciąż mało znaną metodą, ale jest używany przez większość projektantów stron internetowych - to jest :nie selektor lub znany również jako selektor negacji.
Co to robi?
Jestem pewien, że :nie sama nazwa opisała już swoją funkcję, którą po prostu wybierze przeciwieństwo określonego elementu lub warunku. Na przykład:
Ta składnia wybierze dowolny element inny niż str (ustęp).
: nie (p) Podczas gdy przykładowa składnia poniżej wybierze div element, który to robi nie mieć klasę ABC
div: nie (.abc) W porządku, spróbujmy teraz tego selektora w prawdziwym przykładzie:
Przede wszystkim zróbmy kilka akapitów z kilkoma linkami z Wikipedii i kilka linków z fikcyjnymi domenami. Oto znacznik HTML dla akapitu.
CSS: nie Selector Demo
Chups z sezamem Jujubes Applake ciasto czekoladowe. Ciasto owsiane Zefir wypieje ciasto toffi. Chupa Chups Jelly Cupcake Gummi niedźwiedzie. Wafelek cytrynowy.
Pączek czekoladowego ciasta Sernik galaretka słodka bułka w proszku suflet ciasto czekoladowe. Wypas wata cukrowa cytryna krople ciasteczko cukierki pączek bonbon marcepan. Galaretka z lukrecji o smaku makaronikowym. Cukierki czekoladowe słodkie bułeczki pianka dragà ??? e wata cukrowa brownie ptasie mleczko.
Budyń na czubku niedźwiedzia ptasiego. Pierniczki z ciasta muffinowego ciastko z owocami galaretka z piernika sezamowego. Cukierki pudding cupcake niedźwiedź pazur. Ciasto marchewkowe muffin wata cukrowa Muffin roll tootsie. Galaretki fasolowe tart dragé ?? wafelek czekoladowy. Słodka bułka toffi cukier śliwkowy ciasto dragâ ?? słodka bułeczka.
Ciasto marcepanowe z ciastem wypas fruitcake. Ciasto owsiane czekoladowe wypas dragÃ? Karmel czekoladowy rogalik wafelkowy babeczka ciasto jujubes tabliczka czekolady. Biscuit candy canes dragà ?? Ã' © e.Candy ciasteczka owsiane ciasteczka sezamowe sernik w proszku tootsie roll biszkopt niedźwiedź pazur. Soufflà ??? gummi bears jelly beans sezam snaps faworki ciastko deser słodkie bonbon.
Plan jest następujący: wybieramy tylko linki, które nie wskazują na Wikipedię, a następnie dają linkom wykrzyknik, aby zwrócić uwagę na te linki.
Najpierw dodamy :po pseudoelement na wszystkich linkach, aby umieścić znak, i definiujemy go jako blok śródliniowy element.
a: after display: inline-block;
Następnie, aby wybrać każdy link, który nie wskazuje na Wikipedię, połączymy :nie selektor z selektorem atrybutów. Selektor atrybutów tutaj wybierze każdy znacznik zakotwiczenia, od którego rozpoczyna się atrybut href http://en.wikipedia.org/ i łącząc to z :nie, oczywiście wybierze odwrotnie. Więc zaczynamy:
a: nie ([href ^ = "http://en.wikipedia.org/"]): after background-color: # F8EEBD; border: 1px solid # EEC56D; border-radius: 3px 3px 3px 3px; kolor: # B0811E; zawartość: "!"; rozmiar czcionki: 10pt; margin-left: 5px; padding: 1px 6px; pozycja: względna;
To działa! Znaczniki zakotwiczenia, które nie wskazują Wikipedii, mają teraz wykrzyknik.
Bug Chrome
Jeśli zobaczysz to w Chrome, zauważysz, że renderowany efekt nie jest taki jak powyżej. Wszystkie linki wydają się mieć wykrzyknik niezależnie od adresu URL.
Ten przypadek został naprawiony jako błąd. Aby naprawić ten błąd, musimy dodać tę regułę.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
A teraz problem powinien zostać rozwiązany.
- Próbny
Wniosek
W niektórych okolicznościach przy użyciu :nie selektor jest naprawdę najbardziej skuteczną opcją, tak jak w powyższym przykładzie, gdzie możemy wybrać losowe elementy bez dodawania niepotrzebnej klasy lub dodatkowego znacznika do dokumentu.
W rzeczywistości możesz dalej budować wspaniałe efekty, korzystając z tego selektora, a to jest jeden przykład: Funkcjonalność filtra z CSS3
