Een kijkje in CSS3 Ontkenning (NIET) Selector
CSS heeft een aantal selectors waarmee je elementen in bepaalde omstandigheden kunt selecteren, zoals : hover, :focus, :actief, enz. Maar vandaag behandelen we die selectors niet. We zullen kijken naar een die nog steeds een weinig bekende methode is maar door de meeste webontwerpers wordt gebruikt - dat is de :niet selector of ook bekend als negatie-selector.
Wat doet het?
Ik weet zeker dat de :niet naam zelf heeft zijn functie al beschreven, die hij eenvoudigweg zal selecteren het tegenovergestelde van het opgegeven element of de opgegeven voorwaarde. Bijvoorbeeld:
Deze syntaxis selecteert elk ander element dan p (Paragraaf).
: Niet (p) Terwijl de onderstaande syntaxis van het voorbeeld de div element dat dat wel doet niet heb klas abc
div: niet (.abc) Oké, laten we deze selector in een echt voorbeeld proberen:
Laten we eerst een paar alinea's maken met een paar links van Wikipedia en enkele links met fictieve domeinen. Hier is de HTML-markering voor de alinea.
De CSS: niet Selector Demo
Jujubes applicake sesame knapt chupa chups chocoladetaart. Haver taart marshmallow wypas toffee donut taart. Chupa chups jelly cupcake gummi bears. De citroen laat vallen cakewafeltje.
Cheesecake chocoladetaart donut gelei zoet broodje poeder soufflà ??  © chocoladecake. Wypas suikerspin citroen daalt koekje snoep donut bonbon marsepein. Makaron snoep zoethout jelly-o. Chocolade taart zoet broodje snoep heemst drag ??  © e suikerspin brownie marshmallow.
Pudding topping marshmallow beer klauw. Pie muffin gebak gummies fruitcake brownie jelly gingerbread sesame snaps. Snoep pudding cupcake beer klauw. Worteltaart muffin suikerspin tootsie roll muffin. Jelly beans tart dragà ??  © e zoete glazuur chocolade reep met toplaag. Zoet broodje toffee suiker pruim gebak dragà ??  ?? Ã' © e bonbon snoep muffin.
Taartmarsepein-gebak Wypas fruitcake. Haver cake chocolade wypas dragà ??  © e suiker pruim worteltaart ijsvorming. Karamels chocolade bar croissant wafer cupcake taart jujubes chocoladereep. Biscuit snoeprietjes dragà ??  © e.Candy brownie haver taart sesam snaps cheesecake poeder tootsie roll biscuit beer klauw. Soufflà ¥  © gummi draagt jelly beans sesame snaps faworki koekje dessert zoet bonbon.
Het plan is hier: we selecteren alleen de links die niet naar Wikipedia verwijzen en geven die links een uitroepteken om aandacht te vestigen op die links.
Eerst voegen we een toe :na pseudo-element op alle links om het merk te plaatsen, en we definiëren het als een inline-block element.
a: na display: inline-block;
Om vervolgens elke link te selecteren die niet naar Wikipedia verwijst, combineren we de :niet selector met een attribuutselector. De attribuutselector selecteert hier elke ankertag waarmee het href-kenmerk begint http://en.wikipedia.org/ en door het te combineren met de :niet, het zal natuurlijk het tegenovergestelde selecteren. Hier gaan we:
a: not ([href ^ = "http://en.wikipedia.org/")): after background-colour: # F8EEBD; rand: 1px vast # EEC56D; grensradius: 3px 3px 3px 3px; kleur: # B0811E; inhoud: "!"; lettergrootte: 10pt; marge links: 5px; opvulling: 1px 6px; positie: relatief;
Het werkt! De ankertags die niet verwijzen naar Wikipedia hebben nu een uitroepteken.
Chrome-bug
Als u dit in Chrome bekijkt, ziet u dat het gerenderde effect niet hetzelfde is als het bovenstaande. Alle links lijken een uitroepteken te hebben, ongeacht de URL.
Deze zaak is eigenlijk als een bug aangepakt. Om deze bug te verhelpen, moeten we deze regel toevoegen.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome-hack * / weergeven: inline-block;
En nu zou het probleem opgelost moeten zijn.
- demonstratie
Conclusie
In sommige omstandigheden met behulp van de :niet selector is echt de meest effectieve optie, net als het bovenstaande voorbeeld, waar we enkele willekeurige elementen kunnen selecteren zonder zelfs onnodige klasse toe te voegen, of extra markup naar het document.
Je kunt echt geweldige effecten bouwen door deze selector te gebruiken, en dit is een voorbeeld: Filterfunctionaliteit met CSS3
