CSS-velgerne jukseark og detaljer

Ch CSS-velgerne jukseark

Nylig har jeg dykket ned i CSS-velgere.

Det er så mange CSS-velgere med ukjente symboler,>. , * + ~ [] osv., så jeg ble ofte forvirret over hvordan CSS-velgere fungerer. Etter hvert rettet jeg dem ut i hodet og designet de på nytt slik jeg forstår.

* Faktisk ville jeg ha ønsket å organisere dem på en enkelt A4-side for å lagre papirer og redde jorden, men det kunne jeg ikke, fordi det er så mange utvalgere jeg ønsket å legge til, så jeg måtte gå over mer enn en side . Det er alle fire A4-sider, bortsett fra forsidene.

Skriv ut dette juksearket og fest det på veggen. Ikke husk dem, bare kikk. Jeg håper denne infografien hjelper deg med å finne riktige CSS-velgere raskt og sparer tid.

CSS-velgerne juksearkCSS selectors spill av Ryan Yu

Gå ned for å laste ned CSS-velgerens jukseark og nyt spillet🕹

Ingen bekymringer. Det hele er gratis.

Dykk ned i CSS-velgeren.

Jeg vil liste opp infografien sammen med MDN-definisjonene for å gjøre ting enklere for deg.

Type velger

Valg av CSS-type samsvarer med elementer etter nodenavn. Med andre ord, den velger alle elementer av den gitte typen i et dokument. - MDN

Type velger

ID-velger

Velger et element basert på verdien av ID-attributtet. Det skal bare være ett element med en gitt ID i et dokument. - MDN

ID-velger

Etterkommer Selector

Ethvert element som samsvarer med B som er en etterkommer av et element som samsvarer med A (det vil si et barn, eller et barn av et barn, etc.). kombinatoren er ett eller flere mellomrom eller dobbelt større enn tegn. - MDN

Etterkommer Selector

Kombiner etterkommere og ID-velgere

Kombiner etterkommere og ID-velgere

Klassevalg

CSS-klassevalgeren samsvarer med elementer basert på innholdet i klasseattributtet. - MDN

Klassevalg

Kombiner klassevalgeren

Kombiner klassevalgeren

Kommakombinator

Ethvert element som samsvarer med A og / eller B. - MDN

Kommakombinator

Universalvelgeren

Bare velg alt!

Universalvelgeren

Kombiner universalvelgeren

Kombiner universalvelgeren

Tilstøtende søskenvelger

Den tilstøtende søskenkombinatoren (+) skiller to velgere og matcher det andre elementet bare hvis det umiddelbart følger det første elementet, og begge er barn av samme overordnede element. - MDN

Tilstøtende søskenvelger

Generelt søskenvelger

Den generelle søskenkombinatoren (~) skiller to velgere og matcher det andre elementet bare hvis det følger det første elementet (men ikke nødvendigvis umiddelbart), og begge er barn av samme overordnede element. - MDN

Generelt søskenvelger

Barnevalg

Barnekombinatoren (>) plasseres mellom to CSS-velgere. Det samsvarer bare med elementene som er matchet av den andre velgeren, som er barn til elementer som er matchet med den første. - MDN

Barnevelger

First Child Pseudo-selector

Det første barnet CSS pseudoklasse representerer det første elementet i en gruppe søskenelementer. - MDN

First Child Pseudo-selector

Bare Child Pseudo-selector

CSS-pseudoklassen for bare barn representerer et element uten søsken. Dette er det samme som: første-barnet: siste-barnet eller: n-barnet (1): nth-last-child (1), men med en lavere spesifisitet. - MDN

Bare Child Pseudo-selector

Siste Child Pseudo-selector

Den siste CSS-pseudoklassen representerer det siste elementet i en gruppe søskenelementer. - MDN

Siste Child Pseudo-selector

Nth Child Pseudo-selector

CS-pseudoklassen matcher elementer basert på deres posisjon i en gruppe søsken. - MDN

Nth Child Pseudo-selector

Nth Last Child Selector

CSS-pseudoklassen: nth-last-child () matcher elementer basert på deres plassering blant en gruppe søsken, og teller fra slutten. - MDN

Nth Last Child Selector

First of Type Selector

Den første CSS-pseudoklassen representerer det første elementet av sin type blant en gruppe søskenelementer. - MDN

First of Type Selector

Nth Type Type Selector

CS-pseudoklassen matcher elementer av en gitt type, basert på deres plassering blant en gruppe søsken. - MDN

Nth Type Type Selector

Nth-of-type selector med formel

Nth-of-type selector
 Merk:
: N-te-of-type (selv)
: N-te-i-typen (ulike)
: N-te-i-typen (2)
: N-te-i-typen (2n)
: N-te-i-typen (3-n-1)
: N-te-i-typen (2n + 2)

Bare av typen valg

Den eneste CSS-pseudoklassen representerer et element som ikke har søsken av samme type. - MDN

Bare av typen valg

Den siste av Type Selector

Den siste CSS-pseudoklassen representerer det siste elementet av sin type blant en gruppe søskenelementer. - MDN

Den siste av Type Selector

Tom velger

Den: tomme CSS-pseudoklassen representerer ethvert element som ikke har barn. Barn kan være elementnoder eller tekst (inkludert hvit mellomrom). Kommentarer, behandlingsinstruksjoner og CSS-innhold påvirker ikke om et element anses som tomt. - MDN

Tom velger

Negasjon Pseudoklasse

CSS-pseudoklassen representerer elementer som ikke samsvarer med en liste over velgere. Siden det forhindrer at bestemte elementer blir valgt, er det kjent som negasjon-pseudoklassen. - MDN

Negasjon Pseudoklasse

Attributtvelger

Attributtvelgere er en spesiell type velger som vil samsvare med elementer basert på attributter og attributtverdier. Generisk syntaks består av firkantede parenteser ([]) som inneholder et attributtnavn etterfulgt av en valgfri betingelse for å matche verdien av attributtet. Attributtvelgere kan deles inn i to kategorier, avhengig av hvordan de samsvarer med attributtverdier: Tilstedevalg og tilvalgsvinkler og attributtvelgere. - MDN

Attributtvelger

Valg av attributtverdi

Valg av attributtverdi

Attributtet starter med velgeren

Denne velgeren vil velge alle elementer med attributtet attr som verdien starter med val. - MDN

Attributtet starter med velgeren

Attributtet slutter med velgeren

Denne velgeren vil velge alle elementer med attributtet attr som verdien ender med val for. - MDN

Attributtet slutter med velgeren

Attributt jokertegnvelger

Denne velgeren vil velge alle elementer med attributtet attr som verdien inneholder substring val. (En substring er ganske enkelt en del av en streng, f.eks. "Katt" er en substring i strengen "larve".) - MDN

Attributt jokertegnvelger

Gratulerer, du har fullført

Artikler

🕹 CodePen

Eventuelle spørsmål eller tilbakemeldinger

Jeg vil gjerne høre tilbakemeldingene dine om hvordan jeg kan gjøre det bedre for deg. Legg igjen kommentarene dine nedenfor eller via min Twitter.

Stor takk til Ryan Yu for at du hjalp meg med å lage CSS-velgerne. Ryan Yu er forfatteren av der jeg lærte mange kule frontteknikker.

Glad kodenegn i dag