En titt på CSS3 Negation (NOT) Selector
CSS har några selektorer som låter dig välja element under vissa förhållanden som :sväva, :fokus, :aktiva, etc. Men idag kommer vi inte att täcka dessa väljare. Vi kommer att undersöka en som fortfarande är en liten känd metod men används av de flesta webbdesigners - det vill säga :inte väljare eller även känd som negationsväljare.
Vad gör det?
Jag är säker på att :inte namnet själv har redan beskrivit sin funktion, att det helt enkelt kommer att välja motsatsen till det angivna elementet eller tillståndet. Till exempel:
Denna syntax kommer att välja något annat element än p (paragraf).
: Ej (p) Medan syntaxen nedan kommer att markera div element som gör det inte har klass abc
div: inte (.abc) Okej, nu, låt oss prova den här väljaren i ett riktigt exempel:
Låt oss först och främst göra några stycken med några länkar från Wikipedia och några länkar med fiktiva domäner. Här är HTML-markeringen för stycket.
CSS: inte selektorns demo
Jujubes applica sesam snaps chupa chups chokladkaka. Havre tårta marshmallow wypas toffee donut tårta. Chupa chups jelly cupcake gummi björnar. Citron droppar tårta wafer.
Cheesecake chokladkaka munk gelé sött rullepulver soufflà     © chokladkaka. Wypas bomull godis citron droppar cookie godis munkar bonbon marsipan. Macaroon godis lakrits gelé-o. Chokladpjäs sött rulle godis marshmallow Draga                                                 Â.
Pudding topping marshmallow björn klo. Pie muffin bakverk gummies fruktkaka brownie Sylvia pepparkakas sesam snaps. Candy pudding cupcake björn klo. Morotkaka muffin bomull godis tootsie rulle muffin. Jelly bönor tårar dra          e s söt glasyr wafer topping chokladkaka. Sweet roll kola socker plommon konditorivaror dragé ???? bonbon godis muffin.
Cake marsipan applicake bakverk wypas fruktkaka. Havre kaka choklad wypas dra  ??  © e socker plommon morot kaka glasyr. Karameller chokladstång croissant wafer cupcake pie jujubes chokladkaka. Biscuit candy canes dragé  © e.Candy brownie havre kaka sesam snaps ostkaka pulver tootsie rulle kex björn klo. Soufflé ???? gummi björnar gelébönor sesam snaps faworki kaka dessert söt bonbon.
Planen här är: Vi kommer bara att välja länkar som inte pekar på Wikipedia och sedan ge dessa länkar ett utropstecken för att varna uppmärksamheten mot dessa länkar.
Först lägger vi till en :efter pseudo-element på alla länkar för att placera varumärket, och vi definierar det som en inline-blocket element.
a: efter display: inline-block;
Då, för att välja varje länk som inte pekar på Wikipedia, kommer vi att kombinera :inte väljare med en attributväljare. Attributväljaren här markerar varje ankerkod som href-attributet börjar med http://en.wikipedia.org/ och genom att kombinera den med :inte, det kommer självklart att välja det motsatta. Nu kör vi:
a: not ([href ^ = "http://en.wikipedia.org/"]): efter bakgrundsfärg: # F8EEBD; gräns: 1px solid # EEC56D; gränsstråle: 3px 3px 3px 3px; färg: # B0811E; innehåll: "!"; typsnittstorlek: 10pt; marginal-vänster: 5px; vaddering: 1px 6px; position: relativ;
Det fungerar! Ankaretiketterna som inte pekar på Wikipedia har nu ett utropstecken.
Chrome Bug
Om du tittar på det här i Chrome märker du att den gjorda effekten inte är som ovan. Alla länkar tycks ha ett utropstecken oavsett webbadressen.
Detta ärende har faktiskt tagits upp som en bugg. Så, för att åtgärda denna fel måste vi lägga till den här regeln.
a [href ^ = "http://sv.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Och nu borde problemet ha blivit fixat.
- demo
Slutsats
I vissa fall använder man :inte väljare är verkligen det mest effektiva alternativet, precis som ovanstående exempel, där vi kan välja några slumpmässiga element utan att till och med lägga till onödig klass eller ytterligare markup till dokumentet.
Du kan faktiskt vidare bygga bra effekter genom att använda den här väljaren, och detta är ett exempel: Filtreringsfunktionalitet med CSS3
