CSS választók cheatsheet és részletek

A CSS választók cheatsheet

A közelmúltban CSS választókba merültem.

Olyan sok CSS választó van ismeretlen szimbólumokkal,>. , * + ~ [] stb., így gyakran zavarban voltam a CSS szelektorok működésében. Végül kihúztam őket a fejembe, és újraterveztem őket, ahogy értem.

* Valójában a papírok mentése és a Föld megmentése érdekében egyetlen A4-es méretű lapon szerettem volna őket elrendezni, de nem tudtam, mert olyan sok választógépek vannak, amelyeket hozzáadni akartam, tehát egynél több oldalt kellett átmennem. . Ez mind a négy A4-es oldal, kivéve a fedőlapokat.

Nyomtassa ki ezt a cheatslapot, és ragassza a falra. Ne emlékezz rájuk, csak kukucskálj. Remélem, hogy ez az infographic segít gyorsan megtalálni a megfelelő CSS-választókat, és időt takarít meg.

A CSS választók cheatsheetRyan Yu CSS válogatói játék

Töltse le a CSS választók cheatslapját, és élvezze a játékot🕹

Semmi gond. Ez mind ingyen.

Merüljön el a CSS választóba.

Az infografikát felsorolom az MDN meghatározásokkal együtt, hogy könnyebbé tegyem a dolgokat.

Típusválasztó

A CSS típusválasztó csomópontnév szerint illeszti az elemeket. Más szavakkal, kiválasztja a dokumentumban az adott típusú összes elemet. - MDN

Típusválasztó

Azonosító választó

Kiválaszt egy elemet az id attribútuma értéke alapján. A dokumentumban csak egy elemnek lehet megadott azonosítója. - MDN

Azonosító választó

Leszármazott választó

Bármely B-vel megegyező elem, amely az A-nak megfelelő elem leszármazottja (vagyis egy gyermek, vagy egy gyermek gyermeke stb.). a kombinátor egy vagy több szóközzel vagy kettősvel nagyobb, mint a jelek. - MDN

Leszármazott választó

Kombinálja az leszármazott és az azonosító választókat

Kombinálja az leszármazott és az azonosító választókat

Osztályválasztó

A CSS osztályválasztó megfelel az elemeknek az osztályattribútum tartalma alapján. - MDN

Osztályválasztó

Kombinálja az osztályválasztót

Kombinálja az osztályválasztót

Vessző kombinátor

Bármely elem, amely megegyezik az A és / vagy a B-vel - MDN

Vessző kombinátor

Az univerzális választó

Csak válassza ki mindent!

Az univerzális választó

Kombinálja az univerzális választót

Kombinálja az univerzális választót

Szomszédos testvérválasztó

A szomszédos testvér-kombinátor (+) elválaszt két válogatót, és csak akkor illeszkedik a második elemhez, ha az közvetlenül az első elem után következik, és mindkettő ugyanazon szülőelem gyermeke. - MDN

Szomszédos testvérválasztó

Testvér-választó

Az általános testvér kombinátor (~) elválaszt két válogatót, és csak akkor illeszkedik a második elemhez, ha követi az első elemet (bár nem feltétlenül azonnal), és mindkettő ugyanazon szülő elem gyermeke. - MDN

Testvér-választó

Gyermekválasztó

A gyermekkombinátort (>) két CSS-választó közé kell helyezni. Csak azoknak az elemeknek felel meg, amelyeket a második szelektor illesztett be, és amelyek az elsővel megegyező elemek gyermekei. - MDN

Gyermekválasztó

Első gyermek álválasztó

A: első gyermek CSS álnév képviseli a testvérek csoportja első elemét. - MDN

Első gyermek álválasztó

Csak a Gyerek álnév

Az: csak gyerek CSS álnév osztály testvér nélküli elemet képvisel. Ez ugyanaz, mint: első gyermek: utolsó gyermek vagy: n. Gyermek (1): n. Utolsó gyermek (1), de alacsonyabb specifikussal. - MDN

Csak a Gyerek álnév

Utolsó gyermek álválasztó

A: utolsó gyermek CSS álnév képviseli a testvérek csoportja utolsó elemét. - MDN

Utolsó gyermek álválasztó

Negyedik gyermek álválasztó

Az: nth-child () CSS ál ál-osztály megegyezik az elemekkel a testvérek csoportjában elfoglalt helyük alapján. - MDN

Negyedik gyermek álválasztó

Negyedik utolsó gyermekválasztó

Az: n-last-child () CSS ál államos osztály az elemeknek a testvérek csoportja közötti helyzetük alapján illeszkedik, a végétől számítva. - MDN

Negyedik utolsó gyermekválasztó

Az első a típusválasztó

A következő: az első típusú CSS álnév képviseli típusának első elemét a testvérek csoportja között. - MDN

Az első a típusválasztó

A típusválasztó n

Az: n-es típusú () CSS álszeres osztály illeszkedik egy adott típusú elemekhez, a testvérek csoportjában elfoglalt helyük alapján. - MDN

A típusválasztó n

Negyedik típusú választó, képlettel

N-es típusú választó
 Megjegyzés:
: N-edik-of-típusú (még)
: N-edik-of-típusú (páratlan)
: N-edik-of-típusú (2)
: N-edik-of-típusú (2n)
: N-edik-of-típusú (3n-1)
: N-edik-of-típusú (2n + 2)

Csak a típusválasztóhoz

A: csak a típusú CSS álnév olyan elemet képvisel, amelynek nincs azonos típusú testvére. - MDN

Csak a típusválasztóhoz

Utolsó a típusválasztó

A: utolsó típusú CSS álnév képviseli a testvérelem csoportja típusa utolsó elemét. - MDN

Utolsó a típusválasztó

Üres választó

Az: üres CSS álnév olyan elemet képvisel, amelyben nincs gyermek. A gyermekek lehetnek elemcsomópontok vagy szöveg (beleértve a szóközt is). A megjegyzések, a feldolgozási utasítások és a CSS-tartalom nem befolyásolja, hogy egy elem üresnek tekinthető-e. - MDN

Üres választó

Negatív álnév

A: not () CSS álnév olyan elemeket reprezentál, amelyek nem felelnek meg a szelektorok listájának. Mivel megakadályozza az egyes elemek kiválasztását, negatív álosztálynak nevezik. - MDN

Negatív álnév

Attribútumválasztó

Az attribútumválasztók egy speciális szelektorfajta, amely megfelel az elemeknek az attribútumok és az attribútumértékek alapján. Általános szintaxisuk szögletes zárójelben ([]) tartalmaz egy attribútumnevet, amelyet egy opcionális feltétel követ, amely megfelel az attribútum értékének. Az attribútumválasztókat két kategóriába lehet osztani, attól függően, hogy miként felelnek meg az attribútumértékek: Jelenlét- és érték-attribútumválasztók, valamint az Substring érték-attribútumválasztók. - MDN

Attribútumválasztó

Attribútum értékválasztó

Attribútum értékválasztó

Az attribútum a választóval kezdődik

Ez a választó minden elemet kiválaszt az attr attribútummal, amelynek az értéke val-val kezdődik. - MDN

Az attribútum a választóval kezdődik

Az attribútum a választóval véget ér

Ez a választó minden elemet kiválaszt az attr attribútummal, amelynek az értéke val-val fejeződik be. - MDN

Az attribútum a választóval véget ér

Attribútum helyettesítő karakter

Ez a választó mindegyik elemet kiválasztja az attr attribútummal, amelynek az értéke az alszöveg val értékét tartalmazza. (Az alszál egyszerűen egy karakterlánc része, például a "macska" egy alsó húr a "hernyó" sorban.) - MDN

Attribútum helyettesítő karakter

Gratulálok, elkészültél

Cikkek

🕹 CodePen

Questions Bármilyen kérdés vagy visszajelzés

Szeretném hallani a visszajelzéseidet arról, hogy miként javíthatom az Ön számára. Kérem, hagyja meg észrevételeit az alábbiakban vagy a Twitter-en keresztül.

Nagy köszönet Ryan Yu-nak, hogy segített nekem a CSS szelektorok megalkotásában. Ryan Yu a szerzője, ahol sok hűvös front-end technikát tanultam meg.

Today Boldog kódjel ma