CSS selektorių kodai ir informacija

CSS selektorių kodai

Neseniai aš pasineriau į CSS selektorius.

Yra tiek daug CSS selektorių su nepažįstamais simboliais,>. , * + ~ [] ir tt, todėl dažnai buvau susipainiojusi dėl to, kaip veikia CSS parinkikliai. Galiausiai aš juos ištiesinau sau į galvą ir sukonstravau juos taip, kaip suprantu.

* Tiesą sakant, būčiau norėjęs juos sulankstyti viename A4 formato puslapyje, kad galėčiau išsaugoti dokumentus ir išsaugoti Žemę, bet negalėjau, nes norinčių pridėti yra tiek daug rinkėjų, kad turėjau pereiti daugiau nei vieną puslapį . Tai yra visi keturi A4 formato puslapiai, išskyrus viršelinius puslapius.

Išspausdinkite šią cheatsheet ir priklijuokite prie sienos. Neatsiminkite jų, tiesiog žvilgčiokite. Tikiuosi, kad šis infografika padės greitai rasti tinkamus CSS parinkiklius ir taupys jūsų laiką.

CSS selektorių kodaiCSS selektorių žaidimas - Ryan Yu

Eik atsisiųsti CSS selektorių kodų lentelę ir mėgaukis žaidimu🕹

Nesijaudink. Viskas nemokama.

Pasinerkite į CSS parinkiklį.

Išvardinsiu infografiką kartu su MDN apibrėžimais, kad jums viskas būtų lengviau.

Tipo parinkiklis

CSS tipo parinkiklis suderina elementus pagal mazgo pavadinimą. Kitaip tariant, jis pasirenka visus nurodyto tipo elementus dokumente. - MDN

Tipo parinkiklis

ID parinkiklis

Parenka elementą pagal jo id atributo vertę. Dokumente turėtų būti tik vienas elementas su duotu ID. - MDN

ID parinkiklis

Palikuonių selektorius

Bet kuris elementas, atitinkantis B, kuris yra elemento, atitinkančio A (t. Y. Vaikas, vaiko vaikas ir pan.), Palikuonis. kombinatorius yra viena ar daugiau tarpų arba dvigubai didesnis už ženklus. - MDN

Palikuonių selektorius

Sujunkite palikuonių ir ID parinkiklius

Sujunkite palikuonių ir ID parinkiklius

Klasės parinkėjas

CSS klasės parinkiklis suderina elementus pagal jų klasės atributo turinį. - MDN

Klasės parinkėjas

Sujunkite klasės parinkiklį

Sujunkite klasės parinkiklį

Kablelių jungiklis

Bet kuris elementas, atitinkantis A ir (arba) B. - MDN

Kablelių jungiklis

Universalus selektorius

Tiesiog pasirinkite viską!

Universalus selektorius

Sujunkite universalųjį parinkiklį

Sujunkite universalųjį parinkiklį

Gretimas seseris rinkėjas

Gretimas brolių ir seserų jungiklis (+) atskiria du selektorius ir atitinka antrąjį elementą tik tuo atveju, jei jis iškart seka pirmąjį elementą, ir abu yra to paties pradinio elemento vaikai. - MDN

Gretimas seseris rinkėjas

Bendrasis brolių ir seserų rinkėjas

Bendrasis brolių ir seserų jungiklis (~) atskiria du selektorius ir atitinka antrąjį elementą tik tuo atveju, jei jis seka pirmąjį elementą (nors nebūtinai iškart), ir abu yra to paties pradinio elemento vaikai. - MDN

Bendrasis brolių ir seserų rinkėjas

Vaiko selektorius

Vaikų derintuvas (>) yra tarp dviejų CSS parinktuvų. Tai atitinka tik tuos elementus, kuriuos atitiko antrasis selektorius, kurie yra elementų, suderintų su pirmuoju, vaikai. - MDN

Vaiko selektorius

Pirmojo vaiko pseudo selektorius

Pirmojo vaiko CSS pseudo klasė reiškia pirmąjį elementą tarp brolių ir seserų grupių. - MDN

Pirmojo vaiko pseudo selektorius

Tik vaiko pseudo selektorius

CSS pseudoklasė: tik vaikas CSS reiškia elementą be jokių brolių ir seserų. Tai tas pats, kas: pirmas vaikas: paskutinis vaikas arba: n-asis vaikas (1): n-asis paskutinis vaikas (1), tačiau mažesnio tikslumo. - MDN

Tik vaiko pseudo selektorius

Paskutinio vaiko pseudo selektorius

Paskutinio vaiko CSS pseudoklasė reiškia paskutinį elementą tarp brolių ir seserų grupės. - MDN

Paskutinio vaiko pseudo selektorius

N-ojo vaiko pseudo selektorius

: N-tojo vaiko () CSS pseudoklasė atitinka elementus pagal jų padėtį seserų grupėje. - MDN

N-ojo vaiko pseudo selektorius

Devintasis paskutinis vaikas

: N-asis paskutinis vaikas () CSS pseudoklasė atitinka elementus pagal jų padėtį tarp brolių ir seserų grupės, skaičiuojant nuo pabaigos. - MDN

Devintasis paskutinis vaikas

Pirmasis tipo parinkiklis

Pirmojo tipo CSS pseudo klasė reiškia pirmąjį tokio tipo elementą tarp brolių ir seserų grupių. - MDN

Pirmasis tipo parinkiklis

N-oji tipo parinkimo priemonė

: N-ojo tipo () CSS pseudoklasė atitinka tam tikro tipo elementus, atsižvelgiant į jų vietą tarp brolių ir seserų grupės. - MDN

N-oji tipo parinkimo priemonė

N-ojo tipo selektorius su formule

N-ojo tipo selektorius
 Pastaba:
: n-asis tipas (lygus)
: n-asis tipas (nelyginis)
: n-asis tipas (2)
: n-asis tipas (2n)
: n-asis tipas (3n-1)
: n-asis tipas (2n + 2)

Tik tipo parinkiklis

Vienintelė CSS pseudo klasė yra elementas, neturintis to paties tipo seserų. - MDN

Tik tipo parinkiklis

Paskutinis tipo parinkiklis

Paskutinio tipo CSS pseudoklasė reiškia paskutinįjį tokio tipo elementą tarp brolių ir seserų grupių. - MDN

Paskutinis tipo parinkiklis

Tuščias selektorius

Tuščia CSS pseudo klasė žymi bet kurį elementą, kuris neturi vaikų. Vaikai gali būti elementų mazgai arba tekstas (įskaitant tarpą). Komentarai, tvarkymo instrukcijos ir CSS turinys neturi įtakos tam, ar elementas laikomas tuščiu. - MDN

Tuščias selektorius

Neigiama pseudoklasė

: Ne () CSS pseudoklasė žymi elementus, kurie neatitinka selektorių sąrašo. Kadangi tai neleidžia pasirinkti konkrečių elementų, jis žinomas kaip neigimo pseudoklasė. - MDN

Neigiama pseudoklasė

Atributų parinkiklis

Atributų selektoriai yra speciali selektoriaus rūšis, kuri atitiks elementus pagal jų atributus ir atributų reikšmes. Jų bendrąją sintaksę sudaro skliaustai ([]), kuriuose yra atributo pavadinimas, po kurio eina pasirenkama sąlyga, kuri atitiktų atributo vertę. Atributų selektorius galima suskirstyti į dvi kategorijas, atsižvelgiant į tai, kaip jie atitinka atributų reikšmes: buvimo ir vertės atributų selektoriai bei „Substring“ vertės atributų selektoriai. - MDN

Atributų parinkiklis

Atributo vertės parinkiklis

Atributo vertės parinkiklis

Atributas prasideda nuo selektoriaus

Šis parinkiklis parinks visus elementus su atributu attr, kurio vertė prasideda val. - MDN

Atributas prasideda nuo selektoriaus

Atributas baigiasi pasirinkus

Šis parinkiklis pasirinks visus elementus su atributu attr, kurio vertė baigiasi val. - MDN

Atributas baigiasi pasirinkus

Atributo pakaitos parinkiklis

Šis parinkiklis pasirenka visus elementus su atributu attr, kurio reikšmėje yra substring val. (Substring yra tiesiog stygos dalis, pvz., „Cat“ yra stringe „caterpillar“.) - MDN

Atributo pakaitos parinkiklis

Sveikiname, kad baigėte

Straipsniai

🕹 „CodePen“

Klausimai ar atsiliepimai

Aš norėčiau išgirsti jūsų atsiliepimus apie tai, kaip galėčiau padaryti jus geresnius. Palikite komentarus žemiau arba per mano „Twitter“.

Didelis ačiū Ryanui Yu, kad jis padėjo man sukurti CSS selektorių žaidimą. Ryanas Yu yra , kuriame išmokau daug puikių „front-end“ metodų, autorius.

Šiandien laimingas kodo ženklas