A Pažvelkite į CSS3 neigimo (NE) parinkiklį
CSS turi keletą parinkčių, leidžiančių pasirinkti elementus tam tikromis sąlygomis, pvz : Pakimba, : dėmesys, : aktyvus, ir tt Tačiau šiandien mes neapimsime šių parinkėjų. Mes pažvelgsime į vieną, kuris vis dar yra mažai žinomas metodas, tačiau jį naudoja daugelis interneto dizainerių - tai yra : ne selektorius arba taip pat žinomas kaip neigimo parinkiklis.
Ką tai daro?
Aš tikiu, kad : ne pats pavadinimas jau apibūdino jo funkciją, kad jis tiesiog pasirinks priešingu elementui ar sąlygai. Pavyzdžiui:
Ši sintaksė pasirinks bet kurį kitą elementą, išskyrus p (paragrafas).
: ne (p) Toliau pateiktoje pavyzdžio sintaksėje bus pasirinkta div elementas ne turėti klasę abc
div: ne (.abc) Dabar gerai, pabandykime šį selektorių tikru pavyzdžiu:
Pirmiausia, padarykime keletą punktų su keliomis nuorodomis iš Vikipedijos ir keletas nuorodų su išgalvotais domenais. Čia yra pastraipos HTML žymėjimas.
CSS: ne selektoriaus demonstracija
„Jujubes“ aplikacijų sezamas slysta chupa chups Šokoladinis pyragas. Avižiniai pyragaičiai zefyras wypas toffee donut tortas. Chupa chups želė cupcake gummi neša. Citrinų lašelių pyragas.
Sūrio pyragas šokolado pyragas želė saldus ritininis milteliai soufflÃ? Â? Wypas medvilnės saldainiai citrinos lašai sausainių saldainiai spurgos marcipanai. Macaroon saldainiai saldymedžio želė-o. Šokoladinis pyragas saldaus ritinio saldainiai Zefyras Ã?.
Pudding topping marshmallow meškiukas. Pyragų mufinų pyragaičiai vaisių pyragas želė meduolių pipirų sezamo snaps. Candy pudingas cupcake meškiukas. Morkų tortas, mufinas, medvilnės saldainiai. Želė pupelės tortas dragÃ? Â? plokštelės šokolado plytelės. „Sweet roll toffee“ cukraus slyvų tešlos „dragÓ Â? saldainių saldainiai.
Tortų marcipanų tepiniai wypas vaisių pyragas. Avižų pyragas šokoladas wypas dragÃ? Karamelės šokolado batonėlis „croissant waff cupcake pie jujubes šokolado“. Sausainių saldainių lazdelės dragÃ? SoufflÃ? Â Â Â Â © gummi lokys pupelių sezamo snaps faworki sausainių saldainių saldainiai.
Čia pateikiamas planas: pasirinksime tik tas nuorodas, kurios nėra nukreiptos į „Wikipedia“, ir tada suteiks šiems nuorodams šūksnio ženklą, kad įspėtų dėmesį į šias nuorodas.
Pirma, pridėsime : po pseudo elementas visose nuorodose, kad pažymėtumėte ženklą, ir mes jį apibrėžiame kaip inline-block elementas.
a: po display: inline-block;
Tada, norėdami pasirinkti kiekvieną nuorodą, kuri nėra nukreipta į Vikipediją, mes sujungsime : ne selektorius su atributo parinkikliu. Čia atributo selektorius pasirinks kiekvieną inkaro žymę, kurią prasideda href atributas http://en.wikipedia.org/ ir derindami ją su : ne, tai, žinoma, pasirinks priešingą. Taigi čia mes einame:
a: ne ([href ^ = "http://en.wikipedia.org/"]): po fono spalva: # F8EEBD; siena: 1px kietas # EEC56D; pasienio spindulys: 3px 3px 3px 3px; spalva: # B0811E; turinys: "!"; šrifto dydis: 10pt; margin-left: 5px; įdėklas: 1px 6px; pozicija: santykinis;
Tai veikia! Ankeriniai žymenys, kurie nėra nukreipti į Vikipediją, dabar turi šauktuką.
„Chrome“ klaida
Jei peržiūrėsite „Chrome“, pastebėsite, kad suteiktas efektas nėra toks, kaip aukščiau. Atrodo, kad visos nuorodos turi šauktuką, nepriklausomai nuo URL.
Šis atvejis iš tikrųjų buvo skirtas kaip klaida. Taigi, norėdami išspręsti šią klaidą, turime pridėti šią taisyklę.
a [href ^ = "http://en.wikipedia.org/]] / *„ Chrome Hack “* / ekranas: inline-block;
Ir dabar problema turėjo būti išspręsta.
- Demo
Išvada
Tam tikromis aplinkybėmis naudokite : ne selektorius iš tikrųjų yra pats efektyviausias variantas, kaip ir aukščiau pateiktas pavyzdys, kur mes galime pasirinkti kai kuriuos atsitiktinius elementus, net nepridedant nereikalingos klasės arba papildomo žymėjimo prie dokumento.
Jūs iš tiesų galite toliau kurti puikius efektus naudodami šį selektorių, ir tai yra vienas pavyzdys: filtro funkcionalumas su CSS3
