Pozrite sa do selektora CSS3 Negation (NOT)
CSS má niekoľko voličov, ktoré vám umožňujú vybrať prvky za určitých podmienok, ako napríklad :vznášať sa, : focus, : aktívny, atď. Dnes už tieto selektory nebudeme pokrývať. Budeme sa pozrieť na jeden, ktorý je stále málo známym spôsobom, ale používa väčšina webových návrhárov - to je : nie selektor alebo tiež známy ako selektor negovania.
Čo to robí?
Som si istý, že : nie samotný názov už opísal svoju funkciu, že to jednoducho vyberie opačný prvok alebo špecifikovaný stav. Napríklad:
Táto syntax vyberie akýkoľvek iný prvok ako p (odsek).
: Nie (p) Zatiaľ čo príkladová syntax nižšie vyberiete div čo robí nie mať triedy abc
div: nie (.abc) Dobre, teraz, skúsme tento výber v skutočnom príklade:
Po prvé, urobme niekoľko odsekov s niekoľkými odkazmi z Wikipédie a niekoľkými odkazmi na fiktívne domény. Tu je značka HTML pre odsek.
CSS: nie Selector Demo
Jujubes aplicake sezamová chupa chups čokoládový koláč. Ovesný koláč marshmallow wypas toffee kobliha koláč. Chupa chups želé cupcake gummi medvede. Citrón kvapká tortu.
Cheesecake čokoládový torta šiška želé sladká roll prášok soufflÃ?  ?? Ã' © čokoládový koláč. Wypas bavlnené cukroví citrón kvapky cukroví cukroví kobliha bonbón marcipán. Makarónové cukríky sladkého drievka želé-o. Čokoládový koláč so sladkosťou ibištek dragà ?? Â? Ã?  © bavlny cukríky brownie marshmallow.
Puding topping marshmallow medveď pazúr. Pie muffin pečivo gummies ovocný koláč brownie želé perníkové sezamové snaps. Candy puding košíček medveď pazúr. Mrkvový koláč muffin bavlna cukroví tootsie roll muffin. Jelly fazuľa koláč dragé ???????? sladké námrazy čalúnená čokoládová tyčinka. Sladká roll karamelový cukor slivka cukráreň dragà ?? Â? Ã' © e bonbón cukroví muffin.
Cake marcipánové pečivo wypas fruitcake. Ovocný koláč čokoláda wypas dragé ???????????????????????????????? Karamel čokoládová tyčinka croissant oblátka cupcake koláč jujubes čokoláda bar. Sušienky sušienky dragé ?????????????????????????????????????????????????????????????????????????????????????????????????????. Soufflà ©  ?? Ã' © gummi nesie želé fazuľa sezamový úchyty faworki cookie dezert sladké bonbon.
Plán je tu: vyberieme iba odkazy, ktoré nie sú odkazom na Wikipédiu a potom tieto odkazy uveďte výkričníkom, aby upozornili na tieto odkazy.
Najprv pridáme : po pseudo-element na všetkých odkazoch na umiestnenie značky a definujeme ju ako inline-blok element.
a: po display: inline-block;
Potom, aby sme vybrali každý odkaz, ktorý nie je odkazom na Wikipédiu, spojíme : nie selektor s voličom atribútov. Selektor atribútu tu vyberie každú značku kotvy, od ktorej začína atribút href http://en.wikipedia.org/ a jeho kombináciou s : nie, bude samozrejme vybrať opak. Takže tu ideme:
a: nie ([href ^ = "http://en.wikipedia.org/"]): po background-color: # F8EEBD; hranica: 1px pevná # EEC56D; okraj okraja: 3px 3px 3px 3px; farba: # B0811E; obsah: "!"; veľkosť písma: 10pt; margin-left: 5px; polstrovanie: 1px 6px; pozícia: relatívna;
Funguje to! Kotevné značky, ktoré na Wikipédiu nesmerujú, majú výkričník.
Chrome Bug
Ak to v prehliadači Chrome uvidíte, zistíte, že vykresľovaný efekt nie je taký, ako je uvedené vyššie. Zdá sa, že všetky odkazy majú výkričník bez ohľadu na adresu URL.
Tento prípad bol skutočne riešený ako chyba. Ak chcete opraviť túto chybu, musíme toto pravidlo pridať.
a [href ^ = "http://sk.wikipedia.org/"] / * Chyba Chrome * / display: inline-block;
A teraz by mal byť problém vyriešený.
- demonštrácie
záver
V niektorých prípadoch s použitím : nie selektor je naozaj najefektívnejšou voľbou, rovnako ako v príklade uvedenom vyššie, kde môžeme vybrať nejaké náhodné prvky bez toho, aby sme dokonca pridali nepotrebnú triedu alebo dodatočnú značku do dokumentu.
Vďaka použitiu tohto voliča môžete navyše vytvárať skvelé efekty a to je jeden z príkladov: Funkcia filtra s CSS3
