Mga CSS selectors cheatsheet at mga detalye

cheatsheet ng mga taga-CSS

Kamakailan lamang, nag-dive ako sa mga Cors selectors.

Maraming mga piling taga-CSS na may hindi pamilyar na mga simbolo,>. , * + ~ [] atbp, kaya madalas akong nalilito tungkol sa kung paano gumagana ang mga pumipili ng CSS. Sa kalaunan, itinuwid ko ito sa aking ulo at muling idinisenyo ang mga ito kung paano ko naiintindihan.

* Sa katunayan, nais kong ayusin ang mga ito sa iisang pahina ng laki ng A4 upang makatipid ng mga papel at mailigtas ang Daigdig ngunit hindi ko magawa, dahil napakaraming mga pinili na nais kong idagdag upang kailangan kong pumunta sa higit sa isang pahina . Ito ang lahat ng apat na pahina ng A4, maliban sa mga pahina ng takip.

I-print ang cheatsheet na ito at idikit ito sa dingding. Huwag kabisaduhin ang mga ito, sumisilip lamang. Inaasahan kong makakatulong ang infographic na ito na makahanap ka ng mga tamang CSS selectors nang mabilis at makatipid ng iyong oras.

CSS selectors cheatsheetAng laro ng CSS selectors ni Ryan Yu

Pumunta upang i-download ang CSS selectors cheatsheet at tamasahin ang laro🕹

Walang alala. Lahat ng ito ay libre.

Ive Sumisid sa CSS selector.

Ililista ko ang infographic kasama ang mga kahulugan ng MDN upang gawing mas madali ang mga bagay para sa iyo.

Uri ng Tagapili

Ang tipo ng CSS type ay tumutugma sa mga elemento sa pamamagitan ng node name. Sa madaling salita, pinipili nito ang lahat ng mga elemento ng ibinigay na uri sa loob ng isang dokumento. - MDN

Uri ng Tagapili

Tagapili ng ID

Pumili ng isang elemento batay sa halaga ng katangian ng id nito. Dapat mayroong isang elemento lamang na may isang naibigay na ID sa isang dokumento. - MDN

Tagapili ng ID

Descendant Selector

Anumang elemento na tumutugma sa B na isang inapo ng isang elemento na tumutugma sa A (iyon ay, isang bata, o anak ng isang bata, atbp.). ang kombinator ay isa o higit pang mga puwang o dalawahan na mas malaki kaysa sa mga palatandaan. - MDN

Descendant Selector

Pagsamahin ang Descendant & ID Selectors

Pagsamahin ang Descendant & ID Selectors

Pinili ng Klase

Ang taga-klase ng klase ng CSS ay tumutugma sa mga elemento batay sa mga nilalaman ng kanilang katangian ng klase. - MDN

Pinili ng Klase

Pagsamahin ang Tagapili ng Klase

Pagsamahin ang Tagapili ng Klase

Comma Combinator

Anumang sangkap na tumutugma sa A at / o B. - MDN

Comma Combinator

Ang Universal Selector

Piliin lang ang lahat!

Ang Universal Selector

Pagsamahin ang Universal Selector

Pagsamahin ang Universal Selector

Katangian na Pinili ng Magkakapatid

Ang katabing kapatid na kombinator (+) ay naghihiwalay sa dalawang pumipili at tumutugma sa pangalawang elemento lamang kung agad itong sumunod sa unang elemento, at pareho ang mga anak ng parehong elemento ng magulang. - MDN

Katangian na Pinili ng Magkakapatid

General Sibling Selector

Ang pangkalahatang kapatid na kombinator (~) ay naghihiwalay sa dalawang pumipili at tumutugma sa pangalawang elemento lamang kung sumusunod ito sa unang elemento (kahit na hindi kinakailangan agad), at pareho ang mga anak ng parehong elemento ng magulang. - MDN

General Sibling Selector

Pinili ng Bata

Ang bata combinator (>) ay inilalagay sa pagitan ng dalawang CSS selectors. Tumutugma lamang sa mga elementong ito na katugma ng pangalawang tagapili na ang mga anak ng mga elemento na itinugma sa una. - MDN

Pinili ng Bata

Unang Bata Pseudo-tagapili

Ang: ang unang-bata na CSS pseudo-klase ay kumakatawan sa unang elemento sa isang pangkat ng mga elemento ng kapatid. - MDN

Unang Bata Pseudo-tagapili

Tanging ang Pseudo-selector ng Bata

Ang: nag-iisang anak na CSS pseudo-klase ay kumakatawan sa isang elemento nang walang magkakapatid. Ito ay kapareho ng: first-anak: huling-anak o: nth-anak (1): nth-last-child (1), ngunit may isang mas mababang detalye. - MDN

Tanging ang Pseudo-selector ng Bata

Huling Pseudo-selector ng Bata

Ang: huling-bata na CSS pseudo-klase ay kumakatawan sa huling elemento sa isang pangkat ng mga elemento ng kapatid. - MDN

Huling Pseudo-selector ng Bata

Nth Child Pseudo-selector

Ang: nth-child () CSS pseudo-class na tumutugma sa mga elemento batay sa kanilang posisyon sa isang pangkat ng magkakapatid. - MDN

Nth Child Pseudo-selector

Nth Huling Pinili ng Bata

Ang: nth-last-child () CSS pseudo-class na tumutugma sa mga elemento batay sa kanilang posisyon sa isang pangkat ng mga kapatid, na binibilang mula sa wakas. - MDN

Nth Huling Pinili ng Bata

Una sa Uri ng Tagapili

Ang: first-of-type na CSS pseudo-klase ay kumakatawan sa unang elemento ng uri nito sa isang pangkat ng mga elemento ng kapatid. - MDN

Una sa Uri ng Tagapili

Ika-1 ng Uri ng Tagapili

Ang: nth-of-type () CSS pseudo-class na tumutugma sa mga elemento ng isang naibigay na uri, batay sa kanilang posisyon sa isang pangkat ng mga kapatid. - MDN

Ika-1 ng Uri ng Tagapili

Nth-of-type Selector na may Formula

Nth-of-type na Pinili
 Tandaan:
: nth-of-type (kahit na)
: nth-of-type (kakaiba)
: nth-of-type (2)
: nth-of-type (2n)
: nth-of-type (3n-1)
: nth-of-type (2n + 2)

Tanging ng Tagapili ng Uri

Ang: tanging uri ng CSS pseudo-klase ay kumakatawan sa isang elemento na walang magkakapatid na magkatulad na uri. - MDN

Tanging ng Tagapili ng Uri

Huli sa Uri ng Tagapili

Ang: huling-ng-uri na CSS pseudo-klase ay kumakatawan sa huling elemento ng uri nito sa isang pangkat ng mga elemento ng kapatid. - MDN

Huli sa Uri ng Tagapili

Walang laman ang Pinili

Ang: walang laman na klase ng CSS pseudo ay kumakatawan sa anumang elemento na walang mga anak. Ang mga bata ay maaaring alinman sa mga elemento ng node o teksto (kabilang ang whitespace). Ang mga puna, mga tagubilin sa pagproseso, at nilalaman ng CSS ay hindi nakakaapekto kung ang isang elemento ay itinuturing na walang laman. - MDN

Walang laman ang Pinili

Negasyon Pseudo-klase

Ang: hindi () CSS pseudo-klase ay kumakatawan sa mga elemento na hindi tumutugma sa isang listahan ng mga pumipili. Dahil pinipigilan nito ang mga tukoy na item na mapili, kilala ito bilang klase ng negation pseudo. - MDN

Negasyon Pseudo-klase

Tagapili ng Katangian

Ang mga pumipili ng katangian ay isang espesyal na uri ng tagapili na tutugma sa mga elemento batay sa kanilang mga katangian at mga halaga ng katangian. Ang kanilang pangkaraniwang syntax ay binubuo ng mga square bracket ([]) na naglalaman ng isang pangalan ng katangian na sinusundan ng isang opsyonal na kondisyon upang tumugma laban sa halaga ng katangian. Ang mga pumipili ng katangian ay maaaring nahahati sa dalawang kategorya depende sa paraang tumutugma sila sa mga halaga ng katangian: Presensya at mga tagapili ng katangian ng halaga at mga tagapili ng katangian ng Substring. - MDN

Tagapili ng Katangian

Tagapili ng Halaga ng Katangian

Tagapili ng Halaga ng Katangian

Ang Attributo Nagsisimula Sa Pinili

Pipiliin ng piniling ito ang lahat ng mga elemento na may katangian ng katangian na kung saan ang halaga ay nagsisimula sa val. - MDN

Ang Attributo Nagsisimula Sa Pinili

Nagtatapos ang Mga Katangian Sa Tagapili

Pipiliin ng pipiliang ito ang lahat ng mga elemento na may katangian ng katangian kung saan natatapos ang halaga sa val. - MDN

Nagtatapos ang Mga Katangian Sa Tagapili

Attribute ang Wildcard Selector

Pipiliin ng pipiliang ito ang lahat ng mga elemento na may katangian ng katangian na naglalaman ng halaga ng substring val. (Ang isang substring ay simpleng bahagi ng isang string, hal. "Pusa" ay isang substring sa string na "uod".) - MDN

Attribute ang Wildcard Selector

Binabati kita, nakumpleto mo na ang

Mga Artikulo

🕹 CodePen

Anumang mga katanungan o puna

Gustung-gusto kong marinig ang iyong puna sa kung paano ko ito gagaling para sa iyo. Mangyaring iwanan ang iyong mga komento sa ibaba o sa pamamagitan ng aking Twitter.

Malaking salamat kay Ryan Yu sa pagtulong sa akin na gumawa ng laro ng mga taga-CSS. Si Ryan Yu ang may-akda ng kung saan nalaman ko ang maraming mga cool na pamamaraan sa harap.

Maligayang codeign ngayon