Et kig på CSS3 Negation (NOT) Selector
CSS har nogle selektorer, der giver dig mulighed for at vælge elementer under visse forhold som f.eks : hover, :fokus, :aktiv, osv. Men i dag dækker vi ikke disse selektorer. Vi vil undersøge en, der stadig er en lille kendt metode, men bruges af de fleste webdesignere - det er :ikke vælger eller også kendt som negation selector.
Hvad gør den?
Jeg er sikker på at :ikke Navnet selv har allerede beskrevet sin funktion, at det blot vil vælge det modsatte af det angivne element eller tilstand. For eksempel:
Denne syntaks vælger andet element end p (afsnit).
: Ikke (p) Mens eksempelsyntaxen nedenfor vælger div element der gør ikke har klasse abc
div: ikke (.abc) Okay, lad os nu prøve denne vælger i et rigtigt eksempel:
Først og fremmest, lad os lave et par afsnit med et par links fra Wikipedia og et par links med fiktive domæner. Her er HTML-markeringen for stykket.
CSS: ikke valgdemo
Jujubes Apples sesam snaps chupa chups chokoladekage. Havregryn marshmallow wypas toffee donut kage. Chupa chups jelly cupcake gummi bjørne. Citron dråber kage wafer.
Cheesecake chokoladekage donut gelé søde rullepulver soufflé ????? chokoladekage. Wypas bomuld slik citron dråber cookie slik donut bonbon marcipan. Macaroni slik lakrids gelé-o. Chokoladekage sødrulle slik skumfidus dragé [email protected].
Pudding topping marshmallow bjørn klo. Pie muffin wienerbrød frugtkage brownie gelé peperkager sesam snaps. Candy budding cupcake bjørn klo. Gulerodskage muffin bomuld slik tootsie rulle muffin. Jelly bønner tårer drage 锟 斤 拷 e sød glasur wafer topping chokolade bar. Sweet roll toffee sukker blomme konditori dragé ??? bonbon slik muffin.
Cake marcipan applikation wienerbrød wypas frugtkage. Havre kage chokolade wypas drage ???????????????????????????????? Karameller chokolade bar croissant wafer cupcake pie jujubes chokolade bar. Biscuit candy canes dragé Â © e.Candy brownie havre kage sesam snaps ostekage pulver tootsie roll kiks bjørn klo. Soufflé ???? gummi bjørne gelé bønner sesam snaps faworki cookie dessert søde bonbon.
Planen her er: Vi vælger kun de links, der ikke peger på Wikipedia, og derefter giver disse links et udråbstegn for at være opmærksom på de links.
Først vil vi tilføje en :efter pseudo-element på alle links for at placere mærket, og vi definerer det som en inline-block element.
a: efter display: inline-block;
For at vælge hvert link, der ikke peger på Wikipedia, vil vi kombinere :ikke vælger med en attributvælger. Attributvælgeren her vælger hvert anker-tag, som href-attributten begynder med http://en.wikipedia.org/ og ved at kombinere det med :ikke, det vil naturligvis vælge det modsatte. Så her går vi:
a: not ([href ^ = "http://en.wikipedia.org/"]): efter baggrundsfarve: # F8EEBD; grænse: 1px solid # EEC56D; grænse-radius: 3px 3px 3px 3px; farve: # B0811E; indhold: "!"; skrifttypestørrelse: 10pt; margin-venstre: 5px; polstring: 1px 6px; stilling: relativ;
Det virker! Ankeretiketterne, der ikke peger på Wikipedia, har nu et udråbstegn.
Chrome fejl
Hvis du ser dette i Chrome, bemærker du, at den gengivne effekt ikke er som ovenfor. Alle links synes at have et udråbstegn uanset URL'en.
Denne sag er faktisk blevet behandlet som en fejl. Så for at rette denne fejl skal vi tilføje denne regel.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Og nu skulle problemet have været rettet.
- Demo
Konklusion
Under nogle omstændigheder ved hjælp af :ikke vælger er virkelig den mest effektive løsning, ligesom i ovenstående eksempel, hvor vi kan vælge nogle tilfældige elementer uden endda at tilføje unødvendige klasser eller yderligere markering til dokumentet.
Du kan faktisk yderligere opbygge store effekter ved at bruge denne vælger, og dette er et eksempel: Filtreringsfunktionalitet med CSS3
