CSS obrazac za odabir i detalje

CSS varalica

Nedavno sam ronio u CSS odabire.

Postoji toliko CSS odabirača s nepoznatim simbolima,>. , * + ~ [] itd., pa su me često zbunili kako funkcioniraju CSS selektori. Na kraju sam ih izravnao u glavi i oblikovao ih kako razumijem.

* Zapravo, htio bih ih organizirati na jednoj stranici veličine A4 da biste spremili papire i spasili Zemlju, ali ne bih mogao, jer imam toliko selektora koje sam želio dodati pa sam morao prijeći više od jedne stranice , Sve su to stranice A4, osim naslovnih stranica.

Ispišite ovaj varalica i zalijepite ga na zid. Nemojte ih pamtiti, samo zavirite. Nadam se da će vam ova infografika brzo pronaći prave CSS odabire i štedi vam vrijeme.

CSS varalicaCSS igra selektora Ryan Yu

Idite da preuzmete CSS obrazac za odabir i uživajte u igri🕹

Bez brige. Sve je besplatno.

Zaronite u CSS izbornik.

Navest ću infografiku zajedno s MDN definicijama kako bih vam olakšao stvari.

Selektor tipa

Selektor tipa CSS odgovara elementima prema nazivu čvora. Drugim riječima, on bira sve elemente date vrste u dokumentu. - MDN

Selektor tipa

Selektor ID-a

Odabir elementa temelji se na vrijednosti atributa id. U dokumentu bi trebao biti samo jedan element s danom ID-om. - MDN

Selektor ID-a

Selektor potomaka

Bilo koji element koji odgovara B koji je potomak elementa koji odgovara A (to jest, dijete ili dijete djeteta itd.). kombinator je jedan ili više razmaka ili dvostruko veći od znakova. - MDN

Selektor potomaka

Kombinirajte birače descendenta i ID

Kombinirajte birače descendenta i ID

Selektor klase

Selektor CSS klase odgovara elementima na temelju sadržaja atributa njihove klase. - MDN

Selektor klase

Kombinirajte izbornik klase

Kombinirajte izbornik klase

Combinator

Bilo koji element koji odgovara A i / ili B. - MDN

Combinator

Univerzalni izbornik

Samo odaberite sve!

Univerzalni izbornik

Kombinirajte univerzalni izbornik

Kombinirajte univerzalni izbornik

Susjedni izbor braće

Susjedni bračni kombinator (+) razdvaja dva birača i odgovara drugom elementu samo ako odmah slijedi prvi element, a oba su djeca istog roditeljskog elementa. - MDN

Susjedni izbor braće

Općeniti izbor braće i sestre

Opći kombinator braće (~) razdvaja dva birača i odgovara drugom elementu samo ako slijedi prvi element (iako ne nužno odmah), a oba su djeca istog roditeljskog elementa. - MDN

Općeniti izbor braće i sestre

Birač djece

Dječji kombinator (>) nalazi se između dva CSS birača. Odgovara samo onim elementima koji su usklađeni s drugim selektorom, a to su djeca elemenata podudarnih s prvim. - MDN

Birač djece

Pseudo-selektor prvog djeteta

CSS pseudo-klasa: prvo dijete predstavlja prvi element među skupinom elemenata. - MDN

Pseudo-selektor prvog djeteta

Samo dječji pseudo-selektor

CSS pseudo-klasa: only-child predstavlja element bez braće i sestara. To je isto kao: prvo dijete: posljednje dijete ili: nth-dijete (1): nth-last-dijete (1), ali s nižim specifičnostima. - MDN

Samo dječji pseudo-selektor

Zadnji dijete Pseudo selektor

CSS pseudo-klasa: last-child predstavlja posljednji element u grupi bračnih elemenata. - MDN

Zadnji dijete Pseudo selektor

Nth Child Pseudo selektor

CSS pseudo-klasa: nth-child () odgovara elementima na temelju njihovog položaja u grupi braće i sestara. - MDN

Nth Child Pseudo selektor

Nth Last Child Selector

CSS-ova pseudo-klasa: nth-last-child () odgovara elementima na temelju njihovog položaja među skupinom braće i sestara, računajući od kraja. - MDN

Nth Last Child Selector

Prvo od tipača

CSS pseudo-klasa prvog tipa predstavlja prvi element svoje vrste među skupinom bračnih elemenata. - MDN

Prvo od tipača

Nth of Selector Type

CSS pseudo-klasa: nth-of-type () odgovara elementima određene vrste na temelju njihovog položaja među skupinom braće i sestara. - MDN

Nth of Selector Type

Selektor četvrtog tipa s formulom

Selektor četvrtog tipa
 Napomena:
: N-ti-o-tipa (i)
: N-ti-o-tipa (ak)
: N-ti-o-tipa (2)
: N-ti-o-tipa (2n)
: N-ti-o-tipa (3-N-1)
: N-ti-o-tipa (2n + 2)

Samo za izbor tipa

CSS pseudo-klasa: samo-vrste predstavlja element koji nema braće i sestre iste vrste. - MDN

Samo za izbor tipa

Zadnji izbirnik vrste

CSS pseudo-klasa posljednjeg tipa predstavlja posljednji element svoje vrste među skupinom elemenata. - MDN

Zadnji izbirnik vrste

Prazan izbornik

: Prazna CSS pseudo-klasa predstavlja bilo koji element koji nema djecu. Djeca mogu biti ili čvorovi elemenata ili tekst (uključujući razmake). Komentari, upute za obradu i CSS sadržaj ne utječu na to smatra li se element praznim. - MDN

Prazan izbornik

Negacija pseudo-klase

CSS pseudo-klasa: (ne) CSS predstavlja elemente koji se ne podudaraju s popisom odabirača. Budući da sprječava odabir određenih stavki, poznata je kao negacijska pseudo-klasa. - MDN

Negacija pseudo-klase

Birač atributa

Birači atributa posebna su vrsta selektora koji će odgovarati elementima na temelju njihovih atributa i atributa. Njihova se generička sintaksa sastoji od uglatih zagrada ([]) koji sadrže naziv atributa, nakon čega slijedi neobavezni uvjet da se podudara s vrijednošću atributa. Birači atributa mogu se podijeliti u dvije kategorije ovisno o načinu na koji se podudaraju s vrijednostima atributa: Birači atributa prisutnosti i vrijednosti i Birači atributa vrijednosti Substringa. - MDN

Birač atributa

Selektor vrijednosti atributa

Selektor vrijednosti atributa

Atributi započinju s selektorom

Ovaj će selektor odabrati sve elemente s atributom attr za koje vrijednost počinje s val. - MDN

Atributi započinju s selektorom

Atribut završava selektorom

Ovaj će selektor odabrati sve elemente s atributom attr za koje vrijednost završava s val. - MDN

Atribut završava selektorom

Atributi Selektor odabir

Ovaj će selektor odabrati sve elemente s atributom attr za koje vrijednost sadrži val podstringa. (Substring je jednostavno dio niza, npr. "Cat" je podstring u nizu "gusjenica".) - MDN

Atributi Selektor odabir

Čestitamo, završili ste

Članci

🕹 CodePen

Bilo kakva pitanja ili povratne informacije

Volio bih čuti vaše komentare o tome kako vam mogu poboljšati. Molimo ostavite svoje komentare ispod ili preko mog Twittera.

Veliko hvala Ryan Yu što mi je pomogao napraviti CSS selektorsku igru. Ryan Yu je autor u kojem sam naučio brojne cool front-end tehnike.

Sretan kodni znak danas