Izbirnik CSS-ja in podrobnosti

Cheatsheet izbirnikov CSS

Pred kratkim sem se potapljal v izbirnike CSS.

Obstaja toliko izbirnikov CSS z neznanimi simboli,>. , * + ~ [] itd., zato so me pogosto zmedli, kako delujejo izbirniki CSS. Sčasoma sem jih poravnal v glavi in ​​jim na novo oblikoval, kako razumem.

* Pravzaprav bi jih želel organizirati na eni strani velikosti A4, da shranim papirje in rešim Zemljo, vendar ne bi mogel, saj je toliko izbirnikov, ki sem jih želel dodati, zato sem moral iti čez več strani . Vse štiri strani A4, razen naslovnic.

Natisnite to vanjo in jo prilepite na steno. Ne zapomnite si jih, samo pokukajte. Upam, da vam bo ta infografika hitro pomagala najti ustrezne izbirnike CSS in prihranila vaš čas.

Izbirnik CSS izbirnikIgra izbirnikov CSS Ryan Yu

Pojdite, da prenesete obrazec CSS izbirnikov in uživajte v igri🕹

Brez skrbi. Vse je brezplačno.

Potopite se v izbirnik CSS.

Navedel bom infografske podatke skupaj z definicijami MDN, da bom olajšal stvari.

Izbira vrste

Izbirnik vrste CSS se ujema z elementi vozlišča. Z drugimi besedami, v dokumentu izbere vse elemente dane vrste. - MDN

Izbira vrste

Izbirnik ID-jev

Izbere element na podlagi vrednosti atributa id. V dokumentu mora biti samo en element z danim ID-jem. - MDN

Izbirnik ID-jev

Izbirnik potomcev

Vsak element, ki se ujema z B, je potomec elementa, ki se ujema z A (to je otrok ali otrok otroka itd.). kombinator je en ali več presledkov ali dvojno večji od znakov. - MDN

Izbirnik potomcev

Združite izbirnike in izbirnike ID-jev

Združite izbirnike in izbirnike ID-jev

Izbirnik razredov

Izbirnik razreda CSS ustreza elementom glede na vsebino atributa razreda. - MDN

Izbirnik razredov

Združite izbirnik razredov

Združite izbirnik razredov

Kombinator za vejice

Vsak element, ki ustreza A in / ali B. - MDN

Kombinator za vejice

Univerzalni izbirnik

Samo izberite vse!

Univerzalni izbirnik

Združite univerzalni izbirnik

Združite univerzalni izbirnik

Sosednji izbirnik brata

Sosednji bračni kombinator (+) ločuje dva izbirnika in se ujema z drugim elementom le, če takoj sledi prvemu elementu in oba sta otroka istega matičnega elementa. - MDN

Sosednji izbirnik brata

Splošni izbirnik brata

Splošni kombinirani kombinator (~) loči dva izbirnika in se ujema z drugim elementom le, če sledi prvemu elementu (čeprav ne nujno takoj) in oba sta otroka istega matičnega elementa. - MDN

Splošni izbirnik brata

Izbirnik otrok

Otroški kombinator (>) je postavljen med dva izbirnika CSS. Ujema se samo s tistimi elementi, ki jih ujema drugi izbirnik in so otroci elementov, ki se ujemajo s prvim. - MDN

Izbirnik otrok

Psevdo izbirnik prvega otroka

Psevdorazred CSS prvega otroka predstavlja prvi element med skupino bračnih elementov. - MDN

Psevdo izbirnik prvega otroka

Samo otroški psevdo izbirnik

Pseudorazred CSS: samo-otrok predstavlja element brez bratov in sester. To je isto kot: prvi otrok: zadnji otrok ali: nth-otrok (1): nth-last-otrok (1), vendar z nižjo specifičnostjo. - MDN

Samo otroški psevdo izbirnik

Zadnji otroški psevdo izbirnik

CSS pseudo-razred: zadnji otrok, predstavlja zadnji element med skupino bračnih elementov. - MDN

Zadnji otroški psevdo izbirnik

Nth Child Pseudo-selektor

CS: pseudorazred CSS nth-otrok () ustreza elementom glede na njihov položaj v skupini bratov in sester. - MDN

Nth Child Pseudo-selektor

Izbranci zadnjega otroka

CS: psevdo razreda nth-last-otrok () se ujema z elementi na podlagi njihovega položaja med skupino sorojencev, če štejemo od konca. - MDN

Izbranci zadnjega otroka

Najprej izbirnika vrste

: Psevdoklas CSS prve vrste predstavlja prvi element svoje vrste med skupino bračnih elementov. - MDN

Najprej izbirnika vrste

Nth of Selector Type

CSS psevdo razreda nth-of-type () ustreza elementom dane vrste glede na njihov položaj med skupino sorojencev. - MDN

Nth of Selector Type

Izbirnik Nth tipa s formulo

Izbirnik Nth-of-type
 Opomba:
: nth-of-type (enakomerno)
: nth-of-type (neparno)
: nth-of-type (2)
: nth-of-type (2n)
: n-ti tipa (3n-1)
: n-ta tipa (2n + 2)

Samo za izbiro vrste

CSS psevdo-razred CSS: edini tip predstavlja element, ki nima bratov in sester istega tipa. - MDN

Samo za izbiro vrste

Zadnji izbirnik vrste

CSS zadnji psevdoklas CSS predstavlja zadnji element svoje vrste med skupino bračnih elementov. - MDN

Zadnji izbirnik vrste

Prazen izbirnik

Psevrazred CSS: prazen CSS predstavlja vsak element, ki nima otrok. Otroci so lahko bodisi vozlišča elementov bodisi besedilo (vključno s presledkom). Komentarji, navodila za obdelavo in vsebina CSS ne vplivajo na to, ali se element šteje za prazen. - MDN

Prazen izbirnik

Negacija Psevdorazred

Pseudo-razred CSS: (ne) predstavlja elemente, ki se ne ujemajo s seznamom izbirnikov. Ker preprečuje izbiro določenih elementov, je znan kot negacijski psevdorazred. - MDN

Negacija Psevdorazred

Izbira atributov

Izbirniki atributov so posebna vrsta izbirnika, ki se bo ujemala z elementi na podlagi njihovih atributov in atributskih vrednosti. Njihova splošna skladnja je sestavljena iz oglatih oklepajev ([]), ki vsebujejo ime atributa, ki mu sledi izbirni pogoj, da se ujema z vrednostjo atributa. Izbirnike atributov lahko razdelimo v dve kategoriji, odvisno od načina, kako se ujemajo z vrednostmi atributov: izbirniki atributov prisotnosti in vrednosti ter izbirniki atributa vrednosti podst. - MDN

Izbira atributov

Izbira vrednosti atributa

Izbira vrednosti atributa

Atributi se začnejo z izbirnikom

Ta izbirnik bo izbral vse elemente z atributom attr, za katere se vrednost začne z val. - MDN

Atributi se začnejo z izbirnikom

Atribut konča z izbiro

Ta izbirnik bo izbral vse elemente z atributom attr, za katere se vrednost konča z val. - MDN

Atribut konča z izbiro

Pripišite izbiro nadomestnih znakov

Ta izbirnik bo izbral vse elemente z atributom attr, za katere vrednost vsebuje podstrezni val. (Podstrez je preprosto del niza, npr. "Mačka" je podvrsta v nizu "gosenica".) - MDN

Pripišite izbiro nadomestnih znakov

Čestitamo, zaključili ste

Članki

🕹 CodePen

Vsa vprašanja ali povratne informacije

Rada bi slišala vaše povratne informacije o tem, kako vam lahko naredim boljše. Prosimo, pustite svoje komentarje spodaj ali prek mojega Twitterja.

Najlepša hvala Ryan Yu, ker mi je pomagal narediti igro CSS selektorjev. Ryan Yu je avtor , kjer sem se naučil veliko kul tehnik front-end.

Veseli šifrant danes