CSS-i valijate cheatsheet ja üksikasjad

CSS-i valijate cheatsheet

Hiljuti olen sukeldunud CSS-i valijatesse.

CSS-i valijaid, millel on harjumatud sümbolid, on nii palju,>. , * + ~ [] jne, mistõttu olin CSS-i selektorite töös sageli segaduses. Lõpuks sirgendasin neid oma peas ja kujundasin need ümber nii, nagu ma aru saan.

* Tegelikult oleksin soovinud need paberite ja Maa päästmiseks koondada ühele A4-formaadis lehele, kuid ma ei saanud seda teha, sest valijaid on nii palju, et ma tahtsin lisada, nii et pidin minema üle ühe lehe . See on kõik neli A4-formaadis lehte, välja arvatud tiitellehed.

Printige see pealisleht välja ja kleepige seinale. Ärge jätke neid meelde, vaid piiluge. Loodan, et see infograafik aitab teil kiiresti õiged CSS-i valijad leida ja säästab teie aega.

CSS-i valijate cheatsheetRyan Yu CSS-i valijate mäng

Minge alla laadima CSS-i valijate cheatsheet ja nautige mängu🕹

Ära muretse. See on kõik tasuta.

Sukelduge CSS-i valijasse.

Loetlen infograafiku koos MDN-i määratlustega, et teie jaoks oleks asi lihtsam.

Tüübi valija

CSS-i tüübi valija sobib elementidega sõlme nime järgi. Teisisõnu, see valib dokumendis kõik antud tüüpi elemendid. - MDN

Tüübi valija

ID valija

Valib elemendi selle atribuudi väärtuse põhjal. Dokumendis peaks olema ainult üks element, millel on antud ID. - MDN

ID valija

Järeltulija valija

Iga element, mis sobib B-ga, mis on A-le vastava elemendi järeltulija (st laps või lapse laps jne). kombinaator on üks või mitu tühikut või kaks korda suurem kui märk. - MDN

Järeltulija valija

Kombineeri järeltulija ja ID-valijad

Kombineeri järeltulija ja ID-valijad

Klassi valija

CSS-klassi valija sobib elementidega nende klassi atribuudi sisu põhjal. - MDN

Klassi valija

Kombineeri klassi valija

Kombineeri klassi valija

Komade kombinaator

Mis tahes element, mis sobib A ja / või B. - MDN

Komade kombinaator

Universaalne valija

Valige lihtsalt kõik!

Universaalne valija

Kombineeri universaalne valija

Kombineeri universaalne valija

Külgne õdede valija

Kõrval olev õdede-vendade kombinaator (+) eraldab kaks valijat ja sobib teise elemendiga ainult juhul, kui see järgneb kohe esimesele elemendile, ja mõlemad on sama lähteelemendi lapsed. - MDN

Külgne õdede valija

Õdede üldine valija

Üldine õdede-kombinaator (~) eraldab kaks valijat ja sobib teise elemendiga ainult siis, kui see järgneb esimesele elemendile (ehkki mitte tingimata kohe) ja mõlemad on sama lähteelemendi lapsed. - MDN

Õdede üldine valija

Lapsevalija

Lapsekombinaator (>) asetatakse kahe CSS-i valija vahele. See sobib ainult nende elementidega, millele sobib teine ​​valija ja mis on esimese elemendi järgi sobitatud elementide lapsed. - MDN

Lapsevalija

Esimese lapse pseudovalija

Esimene lapse CSS-i pseudoklass esindab esimest elementi õdede-vendade rühmas. - MDN

Esimese lapse pseudovalija

Ainult lapse pseudovalija

Ainult lapse CSS-i pseudoklass esindab ilma õdede-vendadeta elementi. See on sama mis esimene laps: viimane laps või: n-ta laps (1): n-nda viimane laps (1), kuid väiksema täpsusega. - MDN

Ainult lapse pseudovalija

Viimase lapse pseudovalija

Viimane laps CSS-i pseudoklass tähistab viimast elementi õdede-vendade rühmas. - MDN

Viimase lapse pseudovalija

N-nda lapse pseudovalija

N: lapse () CSS-i pseudoklass sobib elementidega vastavalt nende positsioonile õdede-vendade rühmas. - MDN

N-nda lapse pseudovalija

Viimane lapse valija

: N-nda viimase lapse () CSS-i pseudoklass vastab elementidele nende positsiooni põhjal õdede-vendade rühmas, arvestades otsast peale. - MDN

Viimane lapse valija

Esimene tüübi valija

Esimene tüüpi CSS-i pseudoklass esindab oma tüübi esimest elementi õdede-vendade rühmas. - MDN

Esimene tüübi valija

Tüübi valija n

N-nda tüüpi () CSS-i pseudoklass vastab antud tüüpi elementidele, lähtudes nende positsioonist õdede-vendade rühmas. - MDN

Tüübi valija n

N-ö tüüpi valemiga valija

N-nda tüüpi valija
 Märkus:
: n-nda tüüpi (paaris)
: n-nda tüüpi (paaritu)
: n-nda tüüpi (2)
: n-nda tüüpi (2n)
: n-nda tüüpi (3n-1)
: n-nda tüüpi (2n + 2)

Ainult tüübi valija puhul

Ainult tüüpi CSS-i pseudoklass tähistab elementi, millel pole sama tüüpi õdesid-vendi. - MDN

Ainult tüübi valija puhul

Viimane tüübi valijast

Viimane tüüpi CSS-i pseudoklass tähistab oma tüübi viimast elementi õdede-vendade rühmas. - MDN

Viimane tüübi valijast

Tühi valija

Tühi CSS pseudoklass tähistab mis tahes elementi, millel pole lapsi. Lapsed võivad olla kas elemendi sõlmed või tekst (sh tühik). Kommentaarid, töötlemisjuhised ja CSS-i sisu ei mõjuta seda, kas element loetakse tühjaks. - MDN

Tühi valija

Eitus pseudoklass

CSS pseudoklass esindab: mitte () CSS-i elemente, mis ei vasta selektorite loendile. Kuna see takistab konkreetsete üksuste valimist, nimetatakse seda eituse pseudoklassiks. - MDN

Eitus pseudoklass

Atribuutide valija

Atribuutide valijad on spetsiaalne valijaliik, mis sobitab elemente nende atribuutide ja atribuutide väärtuste põhjal. Nende üldine süntaks koosneb nurksulgudest ([]), mis sisaldavad atribuudi nime, millele järgneb valikuline tingimus, mis sobib atribuudi väärtusega. Atribuutide valijad võib jagada kahte kategooriasse sõltuvalt sellest, kuidas nad atribuutide väärtustele vastavad: Oleku- ja väärtuse atribuutide valijad ning Alamstringi väärtuse atribuutide valijad. - MDN

Atribuutide valija

Atribuudi väärtuse valija

Atribuudi väärtuse valija

Atribuut algab valijaga

See valija valib kõik elemendid atribuudiga attr, mille väärtus algab val-ga. - MDN

Atribuut algab valijaga

Atribuut lõpeb valijaga

See valija valib kõik elemendid atribuudiga attr, mille väärtus lõpeb val-ga. - MDN

Atribuut lõpeb valijaga

Atribuudi metamärgi valija

See valija valib kõik elemendid atribuudiga attr, mille väärtus sisaldab alamstringi val. (Alamstring on lihtsalt osa stringist, nt "kass" on stringi "caterpillar" alamstring.) - MDN

Atribuudi metamärgi valija

Palju õnne, olete lõpetanud

artiklid

🕹 CodePen

Kõik küsimused või tagasiside

Mulle meeldiks kuulda teie tagasisidet selle kohta, kuidas saaksin seda teie jaoks paremaks muuta. Palun jätke oma kommentaarid allpool või minu Twitteri kaudu.

Suured tänud Ryan Yule, kes aitas mul CSS-i valimismängu teha. Ryan Yu on teksti autor, kus õppisin palju lahedaid esiotsa tehnikaid.

Täna õnnelik koodimärk