CSS selectors cheatsheet & details

Che Cheatsheet voor CSS-selectors

Onlangs heb ik in CSS-selectors gedoken.

Er zijn zoveel CSS-selectors met onbekende symbolen,>. , * + ~ [] enz., dus ik was vaak in de war over hoe CSS-selectors werken. Uiteindelijk heb ik ze recht in mijn hoofd gemaakt en opnieuw ontworpen hoe ik het begrijp.

* Ik had ze eigenlijk op één A4-pagina willen ordenen om papier te besparen en de aarde te redden, maar dat lukte niet, omdat ik zoveel selectors wilde toevoegen dat ik meer dan één pagina moest doorlopen . Het zijn alle vier A4-pagina's, behalve de voorbladen.

Print dit cheatsheet uit en plak het op de muur. Onthoud ze niet, gewoon gluren. Ik hoop dat deze infographic je helpt snel de juiste CSS-selectors te vinden en je tijd bespaart.

CSS selectors cheatsheetCSS-selectorspel van Ryan Yu

Ga naar het cheatsheet van de CSS-selectors en geniet van het spel🕹

Maak je geen zorgen. Het is allemaal gratis.

Duik in CSS-selector.

Ik zal de infographic samen met MDN-definities vermelden om het u gemakkelijker te maken.

Typ Selector

De CSS-type selector komt overeen met elementen op knooppuntnaam. Met andere woorden, het selecteert alle elementen van het gegeven type in een document. - MDN

Typ Selector

ID selector

Selecteert een element op basis van de waarde van het id-kenmerk. Er moet slechts één element met een gegeven ID in een document zijn. - MDN

ID selector

Nakomelingenkeuze

Elk element dat overeenkomt met B dat een afstammeling is van een element dat overeenkomt met A (dat wil zeggen een kind of een kind van een kind, enz.). de combinator is een of meer spaties of dubbel groter dan tekens. - MDN

Nakomelingenkeuze

Combineer de Descendant & ID Selectors

Combineer de Descendant & ID Selectors

Class Selector

De CSS-klassenkiezer komt overeen met elementen op basis van de inhoud van hun klassenkenmerk. - MDN

Class Selector

Combineer de klassenkiezer

Combineer de klassenkiezer

Comma Combinator

Elk element dat overeenkomt met A en / of B. - MDN

Comma Combinator

De universele selector

Selecteer gewoon alles!

De universele selector

Combineer de universele selector

Combineer de universele selector

Aangrenzende broer of zus selector

De aangrenzende broer / zuscombinator (+) scheidt twee selectors en komt alleen overeen met het tweede element als het onmiddellijk op het eerste element volgt en beide kinderen van hetzelfde ouderelement zijn. - MDN

Aangrenzende broer of zus selector

Algemene broer / zus-selector

De algemene broer / zus-combinator (~) scheidt twee selectors en komt alleen overeen met het tweede element als het het eerste element volgt (hoewel niet noodzakelijk onmiddellijk), en beide zijn kinderen van hetzelfde ouderelement. - MDN

Algemene broer / zus-selector

Kiezer selecteren

De onderliggende combinator (>) wordt tussen twee CSS-selectors geplaatst. Het komt alleen overeen met die elementen die door de tweede selector worden gematcht, die de kinderen zijn van elementen die door de eerste worden gematcht. - MDN

Kiezer selecteren

Eerste kind Pseudo-selector

De: first-child CSS pseudo-klasse vertegenwoordigt het eerste element in een groep van broer of zus elementen. - MDN

Eerste kind Pseudo-selector

Alleen kind pseudo-selector

De: CSS pseudoklasse voor alleen kinderen vertegenwoordigt een element zonder broers en zussen. Dit is hetzelfde als: first-child: last-child of: nth-child (1): nth-last-child (1), maar met een lagere specificiteit. - MDN

Alleen kind pseudo-selector

Last Child Pseudo-selector

De: CSS-pseudoklasse van het laatste kind vertegenwoordigt het laatste element in een groep elementen van broers en zussen. - MDN

Last Child Pseudo-selector

Nde kind pseudo-selector

De: nth-child () CSS-pseudoklasse combineert elementen op basis van hun positie in een groep broers en zussen. - MDN

Nde kind pseudo-selector

Nth Last Child Selector

De: nth-last-child () CSS-pseudoklasse combineert elementen op basis van hun positie in een groep broers en zussen, te rekenen vanaf het einde. - MDN

Nth Last Child Selector

Eerste van Type Selector

De: first-of-type CSS pseudo-klasse vertegenwoordigt het eerste element van zijn type onder een groep van broer of zus elementen. - MDN

Eerste van Type Selector

Nde van de typekiezer

De: nth-of-type () CSS-pseudoklasse komt overeen met elementen van een bepaald type, op basis van hun positie in een groep broers en zussen. - MDN

Nde van de typekiezer

Nde-type selector met formule

Nth-of-type selector
 Opmerking:
: N-of-type (even)
: N-of-type (oneven)
: N-of type (2)
: N-of-type (2n)
: N-of-type (3n-1)
: N-of-type (2n + 2)

Alleen van typekiezer

De: alleen-van-type CSS pseudo-klasse vertegenwoordigt een element dat geen broers en zussen van hetzelfde type heeft. - MDN

Alleen van typekiezer

Last of Type Selector

De: CSS-pseudoklasse van het laatste type van het type vertegenwoordigt het laatste element van zijn type in een groep elementen van broers en zussen. - MDN

Last of Type Selector

Lege selector

De: lege CSS-pseudoklasse vertegenwoordigt elk element dat geen kinderen heeft. Kinderen kunnen elementknooppunten of tekst zijn (inclusief witruimte). Opmerkingen, verwerkingsinstructies en CSS-inhoud hebben geen invloed op of een element als leeg wordt beschouwd. - MDN

Lege selector

Ontkenning Pseudo-klasse

De: not () CSS-pseudoklasse vertegenwoordigt elementen die niet overeenkomen met een lijst met selectors. Omdat het voorkomt dat specifieke items worden geselecteerd, staat het bekend als de negation pseudo-class. - MDN

Ontkenning Pseudo-klasse

Attribuutselector

Attribuutkiezers zijn een speciaal soort selector die elementen matchen op basis van hun attributen en attribuutwaarden. Hun generieke syntaxis bestaat uit vierkante haken ([]) die een kenmerknaam bevatten, gevolgd door een optionele voorwaarde die overeenkomt met de waarde van het kenmerk. Attribuutkiezers kunnen worden onderverdeeld in twee categorieën, afhankelijk van de manier waarop ze overeenkomen met attribuutwaarden: Aanwezigheids- en waardeattribuutkiezers en Substring waardeattribuutkiezers. - MDN

Attribuutselector

Attribuut Waarde selector

Attribuut Waarde selector

Attribuut begint met Selector

Deze selector selecteert alle elementen met het attribuut attr waarvoor de waarde begint met val. - MDN

Attribuut begint met Selector

Kenmerk eindigt met selector

Deze selector selecteert alle elementen met het attribuut attr waarvoor de waarde eindigt met val. - MDN

Kenmerk eindigt met selector

Kenmerk Wildcard-selector

Deze selector selecteert alle elementen met het attribuut attr waarvoor de waarde de substring val bevat. (Een substring is gewoon een onderdeel van een string, bijv. "Cat" is een substring in de string "caterpillar".) - MDN

Kenmerk Wildcard-selector

Gefeliciteerd, je hebt voltooid

Artikelen

🕹 CodePen

Vragen of feedback

Ik hoor graag je feedback over hoe ik het voor jou kan verbeteren. Laat uw opmerkingen hieronder of via mijn Twitter achter.

Grote dank aan Ryan Yu voor het helpen bij het maken van CSS-selectors-game. Ryan Yu is de auteur van waar ik veel coole front-end technieken heb geleerd.

Gelukkig codesign vandaag