Podívejte se do CSS3 Negation (NOT) Selector
CSS má některé voliče, které vám umožní vybrat prvky za určitých podmínek, jako je například :vznášet se, :soustředit se, :aktivní, Dnes však tyto voliče nepokryjeme. Podíváme se na ten, který je stále málo známou metodou, ale který používá většina webových designérů - to je :ne volič nebo také známý jako volič negace.
Co to dělá?
Jsem si jistý, že :ne název sám o sobě již popsal svou funkci, že jednoduše vybere opak uvedeného prvku nebo podmínky. Například:
Tato syntaxe vybere jiný prvek než str (odstavec).
: ne (p) Zatímco níže uvedená příkladová syntaxe vybere div prvek ne mít třídu abc
div: ne (.abc) Dobře, zkusme tento volič v reálném příkladu:
Nejdříve si udělejme pár odstavců s několika odkazy z Wikipedie a pár odkazů s fiktivními doménami. Zde je HTML značení odstavce.
CSS: ne Selector Demo
Jujubes aplikovat sezam zaskočí chupa chups čokoládový dort. Ovesný dort marshmallow wypas karamel koblihy dort. Chupa chups želé košíček gummi medvědi. Citron kapky dort oplatky.
Tvarohový dort čokoládový dort kobliha želé sladký roll prášek soufflà  ?? čokoládový dort. Wypas bavlna cukroví citron kapky cookie cukroví kobliha bonbon marcipánu. Macaroon cukroví lékořice želé-o. Čokoládový koláč sladký roll cukroví ibišek â ?? â ?? © bavlna cukroví brownie marshmallow.
Pudink polevou marshmallow medvěd dráp. Pie muffin pečivo gummies ovocné koláčky želé perníkové sezamové snímky. Candy pudink košíček medvěd dráp. Mrkvový dort muffin bavlněné cukroví tootsie roll muffin. Želé fazole tart dragâ ?? AA? Sladké námrazy oplatka polevou čokoládovou tyčinku. Sladká rolka karamel cukr švestka pečivo dragÃ? Â? bonbon bonbón muffin.
Dort marcipán aplikované pečivo wypas ovocný koláč. Ovesné koláče čokoládové wypas dragà  ??  © e cukr švestka mrkev dort poleva. Karamelky čokoládová tyčinka croissant oplatka košíček koláč jujubes čokolády. Sušenky cukroví hole dragà ??  ?? Soufflà  ?? à  © © gummi nese želé fazole sezam snaps faworki cookie dezert sladký bonbon.
Plán je zde: vybereme pouze odkazy, které neukazují na Wikipedii, a pak dáme těm odkazům vykřičník, který upozorní na tyto odkazy.
Nejprve přidáme :po pseudo-element na všech spojích k umístění značky a definujeme ji jako blok živel.
a: after display: inline-block;
Pak vybereme každý odkaz, který neukazuje na Wikipedii :ne volič s voličem atributů. Selektor atributů zde vybere každou kotevní značku, kterou atribut href začíná http://en.wikipedia.org/ a jeho kombinací s :ne, bude to samozřejmě zvolit opak. Tak tady jdeme:
a: not ([href ^ = "http://en.wikipedia.org/"]): po background-color: # F8EEBD; hranice: 1px pevná # EEC56D; hraniční okraj: 3px 3px 3px 3px; barva: # B0811E; obsah: "!"; velikost písma: 10pt; margin-left: 5px; polstrování: 1px 6px; poloha: relativní;
Funguje to! Kotevní značky, které neukazují na Wikipedii, mají nyní vykřičník.
Chyba Chrome
Pokud toto zobrazíte v prohlížeči Chrome, zjistíte, že vykreslený efekt není stejný jako výše. Všechny odkazy mají vykřičník bez ohledu na adresu URL.
Tento případ byl ve skutečnosti řešen jako chyba. Abychom tuto chybu opravili, musíme přidat toto pravidlo.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / zobrazení: inline-block;
A teď měl být problém vyřešen.
- Demo
Závěr
V některých případech pomocí :ne selektor je opravdu nejúčinnější možností, stejně jako výše uvedený příklad, kde jsme schopni vybrat některé náhodné prvky, aniž bychom dokonce přidali zbytečnou třídu, nebo další označení dokumentu.
Pomocí tohoto selektoru můžete skutečně dále vytvářet velké efekty, což je jeden příklad: Funkce filtrů s CSS3
