CSS-valitsimet cheatsheet ja yksityiskohdat

CSS-valitsimet cheatsheet

Viime aikoina olen sukellut CSS-valitsijoihin.

On niin paljon CSS-valitsimia, joilla on tuntemattomia symboleja,>. , * + ~ [] jne., joten olin usein hämmentynyt siitä, kuinka CSS-valitsimet toimivat. Lopulta suoristin ne pääni ja suunnittelin ne uudelleen ymmärryksen perusteella.

* Itse asiassa olisin halunnut järjestää ne yhdelle A4-kokoiselle sivulle paperien ja maan pelastamiseksi, mutta en pystynyt, koska valitsijoita on niin paljon, että halusin lisätä, joten minun piti käydä useamman kuin yhden sivun yli . Se on kaikki neljä A4-sivua, kansilehtiä lukuun ottamatta.

Tulosta tämä cheatsheet ulos ja kiinnitä seinälle. Älä muista niitä, vain kurkista. Toivon, että tämä infografia auttaa sinua löytämään oikeat CSS-valitsimet nopeasti ja säästää aikaa.

CSS-valitsimet cheatsheetRyan Yun CSS-valitsijoiden peli

Mene lataamaan CSS-valitsimet cheatsheet ja nauti pelistä🕹

Ei huolia. Se on kaikki ilmaista.

Sukella CSS-valitsimeen.

Aion lukea infografian yhdessä MDN-määritelmien kanssa, jotta asiat olisivat sinulle helpompaa.

Tyypin valitsin

CSS-tyypin valitsin vastaa elementtejä solmun nimen mukaan. Toisin sanoen, se valitsee kaikki tietyn tyyppiset elementit asiakirjasta. - MDN

Tyypin valitsin

ID-valitsin

Valitsee elementin id-määritteen arvon perusteella. Asiakirjassa tulisi olla vain yksi elementti, jolla on annettu ID. - MDN

ID-valitsin

Jälkeläisen valitsija

Mikä tahansa B: tä vastaava elementti, joka on A: ta vastaavan elementin jälkeläinen (eli lapsi tai lapsen lapsi jne.). yhdistäjä on yksi tai useampi välilyönti tai kaksoismerkki suurempi kuin merkit. - MDN

Jälkeläisen valitsija

Yhdistä jälkeläisten ja henkilöiden valitsimet

Yhdistä jälkeläisten ja henkilöiden valitsimet

Luokan valitsin

CSS-luokan valitsin vastaa elementtejä luokka-määritteen sisällön perusteella. - MDN

Luokan valitsin

Yhdistä luokan valitsin

Yhdistä luokan valitsin

Pilkkuyhdistelmä

Mikä tahansa elementti, joka vastaa A: ta ja / tai B. - MDN

Pilkkuyhdistelmä

Universal-valitsin

Valitse vain kaikki!

Universal-valitsin

Yhdistä Universal Selector

Yhdistä Universal Selector

Viereinen sisaruksen valitsija

Vierekkäinen sisarukombinaattori (+) erottaa kaksi valitsinta ja vastaa toista elementtiä vain, jos se seuraa heti ensimmäistä elementtiä, ja molemmat ovat saman vanhemman elementin lapsia. - MDN

Viereinen sisaruksen valitsija

Yleinen sisaruksen valitsija

Yleinen sisarukombinaattori (~) erottaa kaksi valitsinta ja vastaa toista elementtiä vain, jos se seuraa ensimmäistä elementtiä (tosin ei välttämättä välittömästi) ja molemmat ovat saman vanhemman elementin lapsia. - MDN

Yleinen sisaruksen valitsija

Lapsen valitsin

Lapsikombinaattori (>) asetetaan kahden CSS-valitsimen väliin. Se vastaa vain niitä elementtejä, jotka toinen valitsin vastaa, jotka ovat niiden elementtien lapsia, jotka vastaavat ensimmäistä. - MDN

Lapsen valitsin

Ensimmäisen lapsen pseudonvalitsin

Ensimmäisen lapsen CSS-pseudoluokka edustaa ensimmäistä elementtiä sisaruselementtien ryhmässä. - MDN

Ensimmäisen lapsen pseudonvalitsin

Vain lapsen pseudonvalitsin

Vain lapsi CSS-pseudoluokka edustaa elementtiä ilman sisaruksia. Tämä on sama kuin: ensimmäinen lapsi: viimeinen lapsi tai: n. Lapsi (1): n. Viimeinen lapsi (1), mutta tarkempi. - MDN

Vain lapsen pseudonvalitsin

Viimeisen lapsen pseudonvalitsin

Viimeisen lapsen CSS-pseudoluokka edustaa viimeistä elementti sisaruselementtien ryhmässä. - MDN

Viimeisen lapsen pseudonvalitsin

N: nnen lapsen pseudonvalitsin

: N: nnen lapsen () CSS-pseudoluokka vastaa elementtejä sijaintinsa perusteella sisarusten ryhmässä. - MDN

N: nnen lapsen pseudonvalitsin

Ynnäs viimeisen lapsen valitsin

: N: nnen viimeisen lapsen () CSS-pseudoluokka vastaa elementtejä heidän sijaintinsa perusteella sisarusten ryhmässä, lopusta laskettuna. - MDN

Yhdeksäs viimeisen lapsen valitsin

Ensimmäinen tyypin valitsin

: Ensimmäisen tyyppinen CSS-pseudoluokka edustaa tyyppinsä ensimmäistä elementtiä sisaruselementtien ryhmässä. - MDN

Ensimmäinen tyypin valitsin

N: n tyyppivalitsin

: N: nnen tyyppinen () CSS-pseudoluokka vastaa tietyn tyyppisiä elementtejä niiden aseman perusteella sisarusten ryhmässä. - MDN

N: n tyyppivalitsin

Yhdeksäs tyypin valitsin, jolla on kaava

Yhdeksäs tyypin valitsin
 Huomaa:
: Nnen-of-tyyppi (jopa)
: Nnen-of-tyyppi (pariton)
: Nnen-of-tyyppi (2)
: Nnen-of-tyyppi (2n)
: Nnen-of-tyyppi (3n-1)
: Nnen-of-tyyppi (2n + 2)

Vain tyypin valitsimella

Vain tyyppinen CSS-pseudoluokka edustaa elementtiä, jolla ei ole samantyyppisiä sisaruksia. - MDN

Vain tyypin valitsimella

Viimeisin tyyppivalitsimesta

: Viimeisen tyyppinen CSS-pseudoluokka edustaa tyyppinsä viimeistä elementtiä sisaruselementtien ryhmässä. - MDN

Viimeisin tyyppivalitsimesta

Tyhjä valitsin

: Tyhjä CSS-pseudoluokka edustaa mitä tahansa elementtiä, jolla ei ole lapsia. Lapset voivat olla joko elementtisolmuja tai tekstiä (välilyönti mukaan lukien). Kommentit, käsittelyohjeet ja CSS-sisältö eivät vaikuta siihen, pidetäänkö elementtiä tyhjänä. - MDN

Tyhjä valitsin

Negatiivinen pseudo-luokka

: Ei () CSS-pseudoluokka edustaa elementtejä, jotka eivät vastaa valitsinluetteloa. Koska se estää tiettyjen kohteiden valinnan, sitä kutsutaan negatiivin pseudoluokkaan. - MDN

Negatiivinen pseudo-luokka

Attribuutin valitsin

Attribuutin valitsimet ovat erityyppisiä valitsimia, jotka vastaavat elementtejä niiden ominaisuuksien ja määritteiden arvojen perusteella. Niiden yleinen syntaksi koostuu hakasulkeista ([]), jotka sisältävät attribuutin nimen, jota seuraa valinnainen ehto vastaamaan attribuutin arvoa. Attribuutin valitsimet voidaan jakaa kahteen luokkaan riippuen siitä, miten ne vastaavat attribuutti-arvoja: Läsnäolo- ja arvo-ominaisuusvalitsimet ja Substring-arvon ominaisuuksien valitsimet. - MDN

Attribuutin valitsin

Attribuutin arvon valitsin

Attribuutin arvon valitsin

Attribuutti alkaa valitsimella

Tämä valitsin valitsee kaikki elementit attribuutilla attr, jonka arvo alkaa valilla. - MDN

Attribuutti alkaa valitsimella

Attribuutti päättyy valitsimella

Tämä valitsin valitsee kaikki elementit attribuutilla attr, jonka arvo päättyy val: lla. - MDN

Attribuutti päättyy valitsimella

Attribuutin jokerimerkki

Tämä valitsin valitsee kaikki elementit attribuutilla attr, jonka arvo sisältää alimerkkijonon val. (Osajono on yksinkertaisesti osa merkkijonoa, esimerkiksi "kissa" on merkkijono "toukka" alijono.) - MDN

Attribuutin jokerimerkki

Onnittelut, olet valmis completed

Artikkelit

🕹 CodePen

Kysymyksiä tai palautetta

Haluaisin kuulla palautteesi siitä, kuinka voin tehdä siitä sinulle paremman. Jätä kommenttisi alle tai Twitterin kautta.

Suuri kiitos Ryan Yulle, joka auttoi minua CSS-valitsijoiden pelin tekemisessä. Ryan Yu on -kirjailija, jossa olen oppinut monia hienoja käyttöliittymätekniikoita.

Hyvää koodimerkkiä tänään