Foaie de lucru și detalii CSS selectoare

foaia de lucru selectoare CSS

Recent, m-am scufundat în selectoare CSS.

Există atât de mulți selectori CSS cu simboluri necunoscute,>. , * + ~ [], etc. În cele din urmă, le-am îndreptat în cap și le-am reproiectat cum înțeleg.

* De fapt, aș fi vrut să le organizez pe o singură pagină cu dimensiunea A4, pentru a salva hârtii și a salva Pământul, dar nu am putut, pentru că sunt atât de mulți selectori pe care am vrut să-i adaug, așa că a trebuit să parcurg mai mult de o pagină . Este vorba de toate cele patru pagini A4, cu excepția copiilor.

Imprimați această foaie de testare și lipiți-o pe perete. Nu le memorați, ci doar să vă uitați. Sper că această infografie vă ajută să găsiți rapid selectori CSS potriviți și vă economisiți timpul.

Fișă de însoțire a selectanților CSSSelectori CSS joc de Ryan Yu

Accesați descărcarea foii de lucru selectoare CSS și bucurați-vă de joc🕹

Fără griji. Este totul gratuit.

Scufundați-vă în selectorul CSS.

Voi enumera infografia împreună cu definițiile MDN pentru a vă facilita lucrurile.

Selector de tip

Selectorul de tip CSS corespunde elementelor după numele nodului. Cu alte cuvinte, selectează toate elementele tipului dat într-un document. - MDN

Selector de tip

ID-Selector

Selectează un element bazat pe valoarea atributului său de id. Trebuie să existe un singur element cu un ID dat într-un document. - MDN

ID-Selector

Selector descendent

Orice element care se potrivește B care este descendent al unui element care se potrivește cu A (adică un copil sau un copil, etc.). combinatorul este unul sau mai multe spații sau dublu mai mare decât semnele. - MDN

Selector descendent

Combinați descendenții și selectoarele de identificare

Combinați descendenții și selectoarele de identificare

Selector de clase

Selectorul clasei CSS se potrivește cu elemente pe baza conținutului atributului clasei lor. - MDN

Selector de clase

Combinați selectorul de clase

Combinați selectorul de clase

Combinator de virgule

Orice element care se potrivește cu A și / sau B. - MDN

Combinator de virgule

Selectorul universal

Selectați totul!

Selectorul universal

Combinați selectorul universal

Combinați selectorul universal

Selectorul de localitate alăturat

Combinatorul de surori adiacente (+) separă doi selectori și se potrivește cu cel de-al doilea element numai dacă urmează imediat primul element și ambii sunt copii ai aceluiași element părinte. - MDN

Selectorul de localitate alăturat

Selectorul general din Sibling

Combinatorul general de frați (~) separă doi selectori și se potrivește cu cel de-al doilea element numai dacă urmează primul element (deși nu neapărat imediat) și ambii sunt copii ai aceluiași element părinte. - MDN

Selectorul general din Sibling

Selector de copii

Combinatorul pentru copii (>) este plasat între doi selectori CSS. Se potrivește numai cu acele elemente potrivite de al doilea selector care sunt copiii elementelor potrivite de primul. - MDN

Selector de copii

Pseudo-selecționer pentru primul copil

Pseudo-clasa CSS pentru primul copil reprezintă primul element dintr-un grup de elemente fratine. - MDN

Pseudo-selecționer pentru primul copil

Numai Pseudo-selecționer pentru copii

Pseudo-clasa CSS numai pentru copii reprezintă un element fără frați. Acesta este același lucru cu: primul copil: ultimul copil sau: al șaptelea copil (1): al șaptelea copil (1), dar cu o specificitate mai mică. - MDN

Numai Pseudo-selecționer pentru copii

Pseudo-selecționer pentru ultimul copil

Pseudo-clasa CSS pentru ultimul copil reprezintă ultimul element dintr-un grup de elemente fratele. - MDN

Pseudo-selecționer pentru ultimul copil

Al optulea Pseudo-selecționer pentru copii

Pseudo-clasa: nth-child () CSS se potrivește cu elemente pe baza poziției lor într-un grup de frați. - MDN

Al optulea Pseudo-selecționer pentru copii

Al nouălea selecționer pentru ultimul copil

Pseudo-clasa a șaptesprezecea copil () CSS se potrivește cu elementele bazate pe poziția lor în rândul unui grup de frați, numărând de la sfârșit. - MDN

Al nouălea selecționer pentru ultimul copil

Primul selector de tip

Pseudoclasa CSS de prim-tip de tip reprezintă primul element de tipul său dintr-un grup de elemente fratine. - MDN

Primul selector de tip

Al nouălea selector de tip

Pseudo-clasa CS-a-n-de-tip () CSS se potrivește cu elemente de un anumit tip, pe baza poziției lor între un grup de frați. - MDN

Al nouălea selector de tip

Selectorul al nouălea de tip cu formula

Selectorul al nouălea de tip
 Notă:
: Nth-de-tip (chiar)
: Nth-de-tip (nui adevărat)
: Nth-de-tip (2)
: Nth-de-tip (2n)
: Nth-de-tip (3n-1)
: Nth-de-tip (2n + 2)

Numai din Selectorul de tip

Pseudo-clasa CSS numai de tip reprezintă un element care nu are frați de același tip. - MDN

Numai din Selectorul de tip

Ultimul dintre tipul selector

Pseudo-clasa CSS din ultimul tip reprezintă ultimul element al tipului său dintr-un grup de elemente fratine. - MDN

Ultimul dintre tipul selector

Selector gol

Pseudo-clasa CSS goală reprezintă orice element care nu are copii. Copiii pot fi fie noduri de element, fie text (inclusiv spațiul alb). Comentariile, instrucțiunile de procesare și conținutul CSS nu afectează dacă un element este considerat gol. - MDN

Selector gol

Negare Pseudo-clasă

Pseudo-clasa: not () CSS reprezintă elemente care nu corespund unei liste de selectori. Deoarece împiedică selectarea unor elemente specifice, este cunoscută sub denumirea de pseudo-clasă de negație. - MDN

Negare Pseudo-clasă

Selector de atribute

Selecționătorii de atribute sunt un fel de selecționator special care se va potrivi cu elemente bazate pe atributele lor și valorile atributelor. Sintaxa lor generică este formată din paranteze pătrate ([]) care conțin un nume de atribut urmat de o condiție opțională pentru a se potrivi cu valoarea atributului. Selectoarele de atribute pot fi împărțite în două categorii, în funcție de modul în care se potrivesc valorile atributelor: Selectori de atribut de prezență și valoare și Selectorii de atribute de valoare de substring. - MDN

Selector de atribute

Selectorul valorii atributului

Selectorul valorii atributului

Atributul începe cu selectorul

Acest selector va selecta toate elementele cu atributul atribut pentru care valoarea începe cu val. - MDN

Atributul începe cu selectorul

Atributul se încheie cu selectorul

Acest selector va selecta toate elementele cu atributul atribut pentru care valoarea se termină cu val. - MDN

Atributul se încheie cu selectorul

Selector de caracteristici wildcard

Acest selector va selecta toate elementele cu atributul atribut pentru care valoarea conține valul de subliniere. (O subcentră este pur și simplu parte dintr-un șir, de exemplu, „pisica” este o subcentră din șirul „omidă”.) - MDN

Selector de caracteristici wildcard

Felicitări, ai terminat

Articole

🕹 CodePen

Orice întrebări sau feedback

Mi-ar plăcea să aud feedback-ul dvs. despre cum pot să vă îmbunătățesc. Vă rugăm să lăsați comentariile de mai jos sau prin Twitter-ul meu.

Thanks Mulțumiri mari lui Ryan Yu că m-a ajutat să fac jocul selectoarelor CSS. Ryan Yu este autorul unde am învățat multe tehnici superioare.

Ign Cod fericit astăzi