En titt på CSS3 Negation (NOT) Selector
CSS har noen selektorer som lar deg velge elementer under visse forhold som :sveve, :fokus, :aktiv, etc. Likevel i dag vil vi ikke dekke disse valgene. Vi vil se på en som fortsatt er en liten kjent metode, men brukes av de fleste webdesignere - det er :ikke velgeren eller også kjent som negasjonsvelger.
Hva gjør den?
Jeg er sikker på at :ikke navnet selv har allerede beskrevet sin funksjon, at det bare vil velge det motsatte av elementet eller tilstanden som er angitt. For eksempel:
Denne syntaksen velger andre elementer enn p (avsnitt).
: Ikke (p) Mens eksempelsyntaxen nedenfor vil velge div element som gjør det ikke har klasse abc
div: ikke (.abc) Ok, nå, la oss prøve denne selgeren i et reelt eksempel:
Først av alt, la oss lage noen få avsnitt med noen få lenker fra Wikipedia og noen få lenker til fiktive domener. Her er HTML-oppslaget for avsnittet.
CSS: ikke seleksjonsdemo
Jujubes Apples sesam snaps chupa chups sjokoladekake. Havre kake marshmallow wypas fløtekaramell doughnut kake. Chupa chups gelé cupcake gummi bjørner. Sitron dråper kake wafer.
Ostekake sjokoladekake doughnut gelé søt rullepulver soufflé ?? Chocolatkake. Wypas bomull candy sitron drops cookie candy doughnut bonbon marsipan. Macaroon candy lakris gelé-o. Sjokoladekake, søtt rullekrem marshmallow dra deg [email protected].
Pudding topping marshmallow bjørn klo. Pie muffin kringle gummies fruktkake brownie gelé pepperkake sesam snaps. Candy pudding cupcake bjørn klo. Gulrot kake muffin bomull candy tootsie rulle muffin. Jelly bønner tårer drage 锟 斤 拷 e søt glasur wafer topping sjokolade bar. Søt rulle karamell sukker plomme bakverk dragé ?? bonbon candy muffin.
Kake marsipan applikat kringle wypas fruktkake. Oat kake sjokolade wypas dragé ???????????????????? Karameller sjokoladebar croissant wafer cupcake kake jujubes sjokoladebar. Biscuit candy canes dragé Â © e.Candy brownie havre kake sesam snaps ostekake pulver tootsie roll kjeks bjørn klo. SoufflÃ? ???? gummi bjørne gelé bønner sesam snaps faworki cookie dessert søt bonbon.
Planen her er: Vi vil bare velge linkene som ikke peker på Wikipedia, og deretter gi disse linkene et utropstegn for å varsle oppmerksomheten mot disse linkene.
Først vil vi legge til en :etter pseudo-element på alle linkene for å plassere merket, og vi definerer det som en inline-blokk element.
a: etter display: inline-block;
Så, for å velge hver kobling som ikke peker på Wikipedia, vil vi kombinere :ikke velg med en attributtvelger. Attributvelgeren her velger hver ankermerke som href-attributtet begynner med http://en.wikipedia.org/ og ved å kombinere den med :ikke, det vil åpenbart velge det motsatte. Så her går vi:
a: not ([href ^ = "http://en.wikipedia.org/"]): etter bakgrunnsfarge: # F8EEBD; border: 1px solid # EEC56D; border-radius: 3px 3px 3px 3px; farge: # B0811E; innhold: "!"; skriftstørrelse: 10pt; margin-left: 5px; polstring: 1px 6px; posisjon: relativ;
Det fungerer! Ankeretikettene som ikke peker på Wikipedia har nå et utropstegn.
Chrome feil
Hvis du ser dette i Chrome, vil du legge merke til at den gjengitte effekten ikke er som ovenfor. Alle koblingene ser ut til å ha et utropstegn uavhengig av nettadressen.
Denne saken har faktisk blitt tatt opp som en feil. Så, for å fikse denne feilen, må vi legge til denne regelen.
en [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Og nå må problemet være løst.
- Demo
Konklusjon
I noen tilfeller bruker du :ikke selector er virkelig det mest effektive alternativet, akkurat som eksempelet ovenfor, der vi kan velge noen tilfeldige elementer uten å til og med legge til unødvendig klasse eller ytterligere markup til dokumentet.
Du kan faktisk bygge videre store effekter ved å bruke denne väljeren, og dette er et eksempel: Filterfunksjonalitet med CSS3
