A Ieskatieties CSS3 negatīva (NOT) selektorā
CSS ir daži selektori, kas ļauj izvēlēties elementus noteiktos apstākļos, piemēram, : lidināties, : fokuss, : aktīvs, utt. Šodien mēs neaptiksim šos atlasītājus. Mēs izskatīsim to, kas joprojām ir maz zināms, bet kuru izmanto vairākums tīmekļa dizaineru - tas ir : nē selektors vai arī pazīstams kā negatīva selektors.
Ko tas dara?
Es esmu pārliecināts, ka : nē pats vārds jau ir aprakstījis tās funkciju, ka tas vienkārši izvēlēsies pretstatā norādītajam elementam vai stāvoklim. Piemēram:
Šī sintakse atlasīs jebkuru citu elementu, izņemot p (paragrāfs).
: nav (p) Kaut arī zemāk redzamais piemērs sintakse izvēlēsies div elementu ne ir klase abc
div: nav (.abc) Labi, tagad mēģināsim šo selektoru reālā piemērā:
Pirmkārt, pieņemsim dažus punktus ar dažām saitēm no Vikipēdijas un dažas saites ar izdomātām jomām. Šeit ir rindkopas HTML atzīme.
CSS: nav atlases demonstrācija
Jujubes aplikācijas sezama snaps chupa chups šokolādes kūka. Auzu kūka marshmallow wypas toffee donut kūka. Chupa chups želejas cupcake gummi lāči. Citronu pilieni.
Siera kūka šokolādes kūka želejas saldais roll pulveris soufflÃ? Â? Wypas kokvilnas konfektes citrona pilieni cookie konfektes donut bonbon marcipāns. Macaroon saldumu lakrica želejas-o. Šokolādes pīrāgs salds roll Candy zefīrs Ã?.
Pudding topping marshmallow lācītis. Pīrāgu smalkmaizītes mīklas augļu kūka želejas piparkūkas sezama snaps. Candy pudiņš cupcake lācis. Burkānu kūka, smalkmaizītes, kokvilnas konfektes. Želejas pupiņas tart dragÃ? Â? vafeļu šokolādes batoniņš. Sweet roll toffee cukura plūmju mīklas dragÃ? Â? bonbon candy muffin.
Kūkas marcipāna aplikācijas mīklas izstrādājumi wypas augļu kūka. Auzu kūka šokolāde wypas dragÃ? Karameļi šokolādes batoniņš ar kruasānu vafeļu cupcake pīrāgu jujubes šokolādes joslā. Cepumu konfektes nūjiņas dragâ? SoufflÃ? Â Â Â Â © gummi lāči pupiņu sezama snaps faworki sīkdatnes saldais bonbon.
Plāns ir šāds: mēs atlasīsim tikai saites, kas nenorāda uz Vikipēdiju, un pēc tam sniedzam šīm saitēm izsaukuma zīmi, lai brīdinātu par šīm saitēm.
Pirmkārt, mēs pievienosim : pēc pseidoelements uz visām saitēm, lai novietotu zīmi, un mēs to definējam kā inline-block elementu.
a: pēc displejs: inline-block;
Tad, lai izvēlētos katru saiti, kas nav vērsta uz Wikipedia, mēs apvienosim : nē selektors ar atribūtu selektoru. Atribūtu selektors šeit izvēlēsies katru enkura tagu, kas sākas ar href atribūtu http://en.wikipedia.org/ un apvienojot to ar : nē, tas, protams, izvēlēsies pretējo. Tātad šeit mēs ejam:
a: nav ([href ^ = "http://en.wikipedia.org/"]): pēc fona krāsa: # F8EEBD; robeža: 1px cietais # EEC56D; robežu rādiuss: 3px 3px 3px 3px; krāsa: # B0811E; saturs: "!"; fonta lielums: 10pt; margin-left: 5px; polsterējums: 1px 6px; pozīcija: relatīvais;
Tas strādā! Anchor tagiem, kas nenorāda uz Wikipedia, tagad ir izsaukuma zīme.
Chrome kļūda
Ja to skatīsiet pārlūkā Chrome, jūs pamanīsiet, ka sniegtais efekts nav tāds pats kā iepriekš. Šķiet, ka visām saitēm ir izsaukuma zīme neatkarīgi no URL.
Šis gadījums ir izskatīts kā kļūda. Tātad, lai labotu šo kļūdu, mums ir jāpievieno šis noteikums.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / displejs: inline-block;
Un tagad problēma bija jānovērš.
- Demo
Secinājums
Dažos gadījumos, izmantojot : nē selektors ir patiešām visefektīvākais risinājums, tāpat kā iepriekš minētais piemērs, kur mēs varam izvēlēties dažus nejaušus elementus, pat nepievienojot nevajadzīgu klasi, vai papildu atzīmi dokumentam.
Jūs faktiski varat veidot lieliskus efektus, izmantojot šo selektoru, un tas ir viens piemērs: filtra funkcionalitāte ar CSS3
