CSS-vælgere cheatsheet & detaljer

CSS-vælgers cheatsheet

For nylig har jeg dykket ned i CSS-vælgere.

Der er så mange CSS-vælgere med ukendte symboler,>. , * + ~ [] osv., så jeg blev ofte forvirret over, hvordan CSS-vælgere fungerer. Til sidst rettede jeg dem ud i hovedet og designede dem igen, så jeg forstår.

* Faktisk ville jeg have ønsket at organisere dem på en enkelt A4-side for at gemme papirer og redde Jorden, men det kunne jeg ikke, fordi der er så mange vælgere, jeg gerne ville tilføje, så jeg måtte gå over mere end en side . Det er alle fire A4-sider, undtagen forside.

Udskriv dette snydeark ud, og sæt det på væggen. Husk dem ikke, bare kig. Jeg håber, at denne infographic hjælper dig med at finde rigtige CSS-vælgere hurtigt og sparer din tid.

CSS-vælgers cheatsheetCSS-vælgerspil af Ryan Yu

Gå for at hente CSS-vælgerens cheatsheet og nyd spillet🕹

Ingen problemer. Det hele er gratis.

Dyk ned i CSS-vælgeren.

Jeg vil angive infografien sammen med MDN-definitioner for at gøre tingene lettere for dig.

Type vælger

CSS-typevælgeren matcher elementer efter nodenavn. Med andre ord vælger den alle elementer af den givne type i et dokument. - MDN

Type vælger

ID-vælger

Vælger et element baseret på værdien af ​​dens id-attribut. Der skal kun være et element med et givet ID i et dokument. - MDN

ID-vælger

Efterkommervælger

Ethvert element, der matcher B, der er efterkommer af et element, der matcher A (det vil sige et barn eller et barn af et barn osv.). kombinatoren er et eller flere mellemrum eller dobbelt større end tegn. - MDN

Efterkommervælger

Kombiner efterkommere og ID-vælgere

Kombiner efterkommere og ID-vælgere

Klassevælger

CSS-klassevælgeren matcher elementer baseret på indholdet af deres klasseattribut. - MDN

Klassevælger

Kombiner klassevælgeren

Kombiner klassevælgeren

Kommakombinator

Ethvert element, der matcher A og / eller B. - MDN

Kommakombinator

Universalvælgeren

Vælg bare alt!

Universalvælgeren

Kombiner universalvælgeren

Kombiner universalvælgeren

Tilstødende søskensvælger

Den tilstødende søskekombinator (+) adskiller to vælgere og matcher kun det andet element, hvis det straks følger det første element, og begge er børn af det samme overordnede element. - MDN

Tilstødende søskensvælger

Generel søskensvælger

Den generelle søskekombinator (~) adskiller to vælgere og matcher kun det andet element, hvis det følger det første element (dog ikke nødvendigvis med det samme), og begge er børn af det samme overordnede element. - MDN

Generel søskensvælger

Børnevælger

Børnekombinatoren (>) placeres mellem to CSS-vælgere. Det matcher kun de elementer, der matches af den anden vælger, der er børn af elementer, der matches med den første. - MDN

Børnevælger

First Child Pseudo-selector

Den: første børn CSS pseudoklasse repræsenterer det første element blandt en gruppe af søskendele. - MDN

First Child Pseudo-selector

Kun pseudo-vælger til børn

CSS-pseudoklassen for kun børn repræsenterer et element uden søskende. Dette er det samme som: første-barn: sidste barn eller: nth-barn (1): nth-last-child (1), men med en lavere specificitet. - MDN

Kun pseudo-vælger til børn

Sidste barn-pseudo-vælger

Den: sidste barn CSS pseudoklasse repræsenterer det sidste element blandt en gruppe af søskendele. - MDN

Sidste barn-pseudo-vælger

Nth Child Pseudo-selector

CS-pseudoklassen matcher elementer baseret på deres position i en gruppe af søskende. - MDN

Nth Child Pseudo-selector

Nth Last Child Selector

CSS-pseudoklassen: nth-last-child () matcher elementer baseret på deres position blandt en gruppe af søskende, der tæller fra slutningen. - MDN

Nth Last Child Selector

Først af Type Selector

Den første CSS-pseudoklasse repræsenterer det første element af sin type blandt en gruppe af søskendele. - MDN

Først af Type Selector

Nth af typevælgeren

CS-pseudoklassen: nth-of-type () matcher elementer af en given type, baseret på deres position blandt en gruppe af søskende. - MDN

Nth af typevælgeren

Nth-type-vælger med formel

Nth-type-vælger
 Bemærk:
: N'te-of-typen (lige)
: N'te-of-type (ulige)
: N'te-of-type (2)
: N'te-of-type (2n)
: N'te-of-type (3n-1)
: N'te-of-type (2n + 2)

Kun af typevælger

CSS-pseudoklassen af ​​den eneste type repræsenterer et element, der ikke har nogen søskende af samme type. - MDN

Kun af typevælger

Sidste af typevælgeren

Den sidste CSS-pseudoklasse repræsenterer det sidste element af sin type blandt en gruppe af søskendele. - MDN

Sidste af typevælgeren

Tom vælger

Den: tomme CSS-pseudoklasse repræsenterer ethvert element, der ikke har børn. Børn kan være enten elementknudepunkter eller tekst (inklusive hvidafstand). Kommentarer, behandlingsinstruktioner og CSS-indhold påvirker ikke, om et element betragtes som tomt. - MDN

Tom vælger

Negativ pseudoklasse

CSS-pseudoklassen repræsenterer elementer, der ikke svarer til en liste over vælgere. Da det forhindrer, at specifikke emner vælges, kaldes det pseudoklasse for negation. - MDN

Negativ pseudoklasse

Attributvælger

Attributvælgere er en speciel type vælger, der matcher elementer baseret på deres attributter og attributværdier. Deres generiske syntaks består af firkantede parenteser ([]), der indeholder et attributnavn efterfulgt af en valgfri betingelse, der matcher værdien af ​​attributten. Attributvælgere kan deles i to kategorier afhængigt af den måde, de matcher attributværdier: Tilstedeværelses- og værdiattributvælgere og Attributvælger for undertringsværdi. - MDN

Attributvælger

Valg af attributværdi

Valg af attributværdi

Attribut starter med vælger

Denne vælger vælger alle elementer med attributten attr, som værdien starter med val. - MDN

Attribut starter med vælger

Attribut afslutter med markøren

Denne vælger vælger alle elementer med attributten attr, som værdien ender med val. - MDN

Attribut afslutter med markøren

Attribut Wildcard Selector

Denne vælger vælger alle elementer med attributten attr, som værdien indeholder den substring-val. (En substring er simpelthen en del af en streng, f.eks. "Kat" er en substring i strengen "larve".) - MDN

Attribut Wildcard Selector

Tillykke, du er færdig

Artikler

🕹 CodePen

Eventuelle spørgsmål eller feedback

Jeg vil meget gerne høre din feedback om, hvordan jeg kan gøre det bedre for dig. Efterlad dine kommentarer nedenfor eller via min Twitter.

Stor tak til Ryan Yu for at hjælpe mig med at lave CSS-vælger-spil. Ryan Yu er forfatteren af ​​ hvor jeg lærte mange seje front-end teknikker.

Glad kodenegn i dag