Poglej v CSS3 Negation (NE) izbirnik

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

CSS ima nekaj izbirnikov, ki omogočajo izbiro elementov v določenih pogojih, kot je npr : hover, : fokus, : aktivno, Danes pa teh selektorjev ne bomo obravnavali. Preučili bomo eno, ki je še vedno malo znana metoda, vendar jo uporablja večina spletnih oblikovalcev - to je : ne izbirnik ali znana tudi kot negator.

Kaj to naredi?

Prepričan sem, da bo : ne Samo ime je že opisalo svojo funkcijo, ki jo bo preprosto izbrala nasprotno od navedenega elementa ali pogoja. Na primer:

Ta skladnja bo izbrala kateri koli element razen str (odstavek).

 : ne (p)

Sintaksa spodaj bo izbrala div element ne imajo razred abc

 div: ne (.abc)

V redu, zdaj, poskusimo ta selektor v pravem primeru:

Najprej naredimo nekaj odstavkov z nekaj povezavami iz Wikipedije in nekaj povezav z izmišljenimi domenami. Tukaj je oznaka HTML za odstavek.

  CSS: ne izbirni gumb
 Uporabljajte sezamove kepice čokoladna torta. Ovseni kolač marshmallow wypas karamelna torta. Chupa chups jelly cupcake gummi medvedi. Lemon kapljice tortne rezine.
 Čokoladna torta s čokoladno torto jelly sladki zvitek v prahu soufflÃ? Â? Ã © © torto. Wypas bombažni sladkarije limonine kapljice piškotek sladkarije krof bonbon marcipan. Macaroon sladkarije sladki sladoled-o. Čokoladna pita sladka peciva marshmallow dragÃ? Â ?? Ã © e bombona sladkarije piškote marshmallow.
 Puding na vrhu kaše medvedovca. Gumice za pecivo iz peciva iz peciva sadno pogače jelly medenjaki sezama snaps. Candy puding cupcake medved krempelj. Korenje torta muffin bombažno sladkarije tootsie roll muffin. Jelly fižol tart dragÃ ?? Â? Ã © e sladko zaledenitve čokoladni preliv. Sladko pecivo karamelno sladko pecivo pecivo dragÃ? bonbon sladkarije muffin.
 Pecivo iz marcipanovega peciva piščančja torta. Ovčja torta čokolada wypas dragÃ? Â? Karamelni čokoladni čokoladni rogljički vafelj piškoti pita jujubes čokoladni bar. Biscuit sladkarije palice dragÃ? Â ?? Ã © e.Candy piškote ovsena torta sezama snaps torta v prahu tootsie roll piškot medved krempelj. SoufflÃ? Â ?? Ã'Â © gummi bears žele fižol sezam snaps faworki piškotek sladica sladki bonbon.

Načrt je tukaj: izbrali bomo samo povezave, ki ne kažejo na Wikipedijo, in nato navedenim povezavam dodali klicaj, ki bo opozoril na te povezave..

Najprej bomo dodali : after psevdo-element na vseh povezavah, da postavite oznako, in jo definiramo kot inline-block element.

 a: po display: inline-block;

Potem, da izberemo vsako povezavo, ki ne kaže na Wikipedijo, bomo združili : ne izbirnik z izbirnikom lastnosti. Izbirnik atributov bo tukaj izbral vsako oznako sidra, s katero začne atribut href http://en.wikipedia.org/ in z združitvijo z : ne, očitno bo izbral nasprotno. Torej, gremo:

 a: ne ([href ^ = "http://en.wikipedia.org/"]): po background-color: # F8EEBD; meja: 1px trdna # EEC56D; obrobni polmer: 3px 3px 3px 3px; barva: # B0811E; vsebina: "!"; velikost pisave: 10pt; margin-left: 5px; oblazinjenje: 1px 6px; položaj: relativna;

Deluje! Sidrne oznake, ki ne kažejo na Wikipedijo, imajo zdaj klicaj.

Bug Bug

Če si to ogledate v Chromu, boste opazili, da upodobljeni učinek ni kot zgoraj. Vse povezave imajo klicaj, ne glede na URL.

Ta primer je bil dejansko naslovljen kot hrošč. Da bi odpravili to napako, moramo dodati to pravilo.

 a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;

In zdaj bi moral biti problem določen.

Demo

Zaključek

V nekaterih okoliščinah uporabite : ne izbirnik je res najučinkovitejša možnost, tako kot zgornji primer, kjer lahko izbiramo nekaj naključnih elementov, ne da bi dodali nepotreben razred ali dodatno oznako dokumentu.

Lahko dejansko dodatno gradite odlične učinke z uporabo tega izbirnika, in to je en primer: Funkcionalnost filtra s CSS3