A Vaata CSS3 negatiivse (EI) valijat
CSS-il on mõned valijad, mis võimaldavad teil teatud tingimustel elemente valida :hõljuma, : fookus, : aktiivne, jne. Täna ei kata me neid valijaid. Me uurime ühte, mis on veel vähetuntud meetod, kuid mida kasutavad enamik veebidisainereid - see on :mitte valijat või nimetatakse ka nullimisvalijaks.
Mida see teeb?
Ma olen kindel, et :mitte nimi ise on juba kirjeldanud selle funktsiooni, et see lihtsalt valib täpsustatud elemendi või seisundi vastupidine. Näiteks:
See süntaks valib mõne muu elemendi peale lk (lõige).
: ei (p) Kui allpool olev näite süntaks valib div element mitte teil on klass abc
div: ei (.abc) Nüüd, nüüd, proovime seda valijat reaalses näites:
Esiteks, teeme mõned punktid mõne lingiga Wikipedias ja mõned lingid fiktiivsete domeenidega. Siin on lõigu HTML-märgistus.
CSS: ei valiku demo
Jujubese aplikaadi seesam klõpsab chupa chups šokolaadikook. Kaerakooki marshmallow wypas toffee Donut kook. Chupa chups kapslite kummi kandjad. Lemon tilka kook vahvel.
Juustukooki šokolaadikook želee magus rull pulber soufflÃ? Â? Wypas puuvillane kommi sidrunipiisk küpsise kommid donut bonbon martsipan. Macaroon kommid lagritsakapsas-o. Šokolaadipirukas magus rullikommid vahukomm à e 'e e e e e e e cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton Â.
Pudding topping marshmallow karu küünis. Sidruni muffin-kondiitritooted puuviljakook piparkookide seesamikapslid. Candy puding cupcake karu küünis. Porgandikook muffin puuvillakommi tootsie rulli muffin. Jelly oad tort dragÃ? Â? vahvli lisandiga šokolaadiplaat. Sweet roll toffee suhkru ploomi kondiitritooted dragÃ? Â? bonbon candy muffin.
Tortid martsipanitooted wypase puuviljakook. Kaerakook šokolaad wypas dragÃ? Â? Caramels šokolaadibaar croissant vahvel cupcake pirukas jujubes šokolaadi baari. Biscuit candy canes dragÃ? Â Â Â â € eCandy brownie kaer kook sesame snaps juustukook pulber tootsie roll küpsise karu küünis. SoufflÃ? Â? küpsise magustoidu magus bonbon.
Siinkohal on plaan: me valime ainult need lingid, mis ei viita Wikipediasse, ja seejärel anna neile lingid hüüumärgiga, et hoiatada nende linkide tähelepanu.
Esiteks lisame : pärast pseudoelement kõigil linkidel märgi paigutamiseks ja me määratleme selle kui inline-block element.
a: pärast kuva: inline-plokk;
Seejärel, et valida iga link, mis ei viita Wikipediale, ühendame selle :mitte atribuutivalijaga valija. Atribuutide valija valib siin iga ankurmärgi, mille href atribuut algab http://en.wikipedia.org/ ja ühendades selle :mitte, ilmselt valib see vastupidise. Nii et siin me läheme:
a: ei ([href ^ = "http://en.wikipedia.org/")): pärast taustavärv: # F8EEBD; piir: 1px tahke # EEC56D; raadius: 3px 3px 3px 3px; värv: # B0811E; sisu: "!"; fondi suurus: 10pt; margin-left: 5px; polsterdus: 1px 6px; positsioon: suhteline;
See töötab! Ankrumärgistel, mis ei viita Wikipediale, on nüüd hüüumärk.
Chrome'i viga
Kui vaatate seda Chrome'is, märkate, et sulatatud efekt ei ole nii, nagu eespool. Kõigil linkidel on URL-i vaatamata hüüumärk.
Seda juhtumit on tegelikult käsitletud veana. Selle vea parandamiseks peame selle reegli lisama.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / kuva: inline-block;
Ja nüüd oleks probleem pidanud olema.
- Demo
Järeldus
Mõningatel juhtudel kasutades :mitte Valik on tõesti kõige tõhusam variant, nagu ülaltoodud näites, kus me saame valida mõningaid juhuslikke elemente, lisamata isegi tarbetut klassi või täiendavat märgistust dokumendile.
Selle valija abil saate tegelikult suurepäraseid efekte ehitada ja see on üks näide: Filtri funktsionaalsus CSS3-ga
