Mikä on CSS-jälkeläisten valitsin?

click fraud protection

Verkkosivuston tekstin ja sisällön asettaminen HTML-koodilla on vain yksi osa rakennusta verkkosivuston etupää. Toinen iso osa tätä prosessia on luoda visuaalinen tyyli, jota hallitsee CSS: n säännöt.

Aina kun rakennamme uutta verkkosivustoa tai teemme suuria muutoksia ulkoasuun olemassa olevaan, haluamme väistämättä, että tietyt verkkosivustomme osat näyttävät tietyltä tavalla. Tätä varten on tärkeää ymmärtää, miten erilaisia ​​käytetään CSS-yhdistimet, kuten CSS-jälkeläisten valitsin. Tämän CSS-yhdistimen avulla verkkosivuston suuret osiot saavat saman tyylimuutoksen kerralla.

Mikä on CSS-jälkeläisten valitsin?

CSS-jälkeläisvalitsin on yksi neljästä erilaisesta CSS-yhdistelmälaitteesta. Kun lisäät yhden välilyönnin () kahden valitsimen väliin, samat tyylielementit koskevat myös toista valitsinta, koska jälkeläisillä on sama ensimmäinen valitsin.

Sinun on ensin ymmärrettävä CSS-jälkeläisten valitsin ymmärtää CSS-valitsimia. Paras tapa kuvata valitsinta on, että se on CSS-operaattori, joka tunnistaa HTML-osan, jota yrität muotoilla. Sitä kutsutaan valitsimeksi, koska se "valitsee" minkä tahansa HTML-bitin samalla operaattorilla kuin CSS-vanhempi.

instagram viewer

Yleisiä esimerkkejä tällaisista operaattoreista ovat:

div

Tämä on tunniste, joka määrittelee osan HTML: stä, joka voi sisältää esimerkiksi kappaleita ja sisältöä tai:

li

joka on järjestetty luettelo. Toinen vastaava tunniste on:

ul

Tämä luo järjestämättömän luettelon. Monimutkaisempia malleja kutsutaan myös valitsimiksi. Yksinkertaisesti sanottuna CSS-jälkeläisvalitsin kertoo verkkosivustolle, miltä näyttää, kun yksi valitsin 'sisäkkäin' yhteisen esi-isänsä alle.

Ensimmäisestä valitsimesta tulee CSS-vanhempi tai ”esi-isän” valitsin ja toisesta valitsimesta tulee jälkeläinen. Ajattele, miten tiedostohakemisto toimii: CSS-vanhempi on kuin kansio, joka sisältää muita kansioita, jotka voivat sisältää omia kansioita.

Neljästä yhdistimestä ainoa, joka valitsee kaiken, mikä on sisäkkäin tietyn CSS-vanhemman alla, on CSS-jälkeläisten valitsin. On olemassa kolme muuta yhdistelmää.

  • Lapsivalitsin (’>’ yhden välilyönnin sijaan) valitsee vain elementit, joihin ensimmäinen valitsin viittaa yhdistimessä. Jos ensimmäinen valitsin on (div) ja toinen valitsin on (p), vain (p) valitaan niin kauan kuin sillä on (div) esi-isänä. Jos kappale luodaan uuden (osion) alle, vaikka se olisi samassa (div), tyylisääntöjä ei pidetä.
  • Viereinen sisarusvalitsin (”+” yhden välilyönnin sijaan) valitsee vain yhdistimen toista valitsinta lähinnä olevan elementin. Jos ensimmäinen valitsin on (div) ja toinen valitsin on (p), valitaan ensimmäinen elementti, joka käyttää (p) mutta ei (div).
  • Sisaruksen yleisvalitsin (’~’ yhden välilyönnin sijasta) valitsee kaikki elementit paitsi ne, joihin toinen valitsin viittaa. Jos ensimmäinen valitsin on (div) ja toinen valitsin on (p), valitaan kaikki elementit, jotka eivät ole (p).

Miltä CSS-jälkeläisvalitsin näyttää?

Seuraavassa esimerkissä kahdesta CSS: n rinnakkain toimivasta jälkeläisvalitsimesta (div) on ensimmäinen valitsin ensimmäisessä yhdistimessä, kun taas (ul) on ensimmäinen valitsin toisessa yhdistäjä. Molemmissa CSS-jälkeläisvalitsimissa (p) käytetään toisena valitsimena.

001_what_is_a_CSS_descendant_selector_4780518

Tyylielementit eroavat (div): n ja (ul: n) välillä, mutta (p) sisältää selvästi CSS-emonsa piirteet molemmissa tapauksissa.

Miksi käyttää CSS-jälkeläisten valitsinta?

CSS-jälkeläisten valitsimen tärkeyden ymmärtäminen on arvokasta ymmärtää ensin CSS: n sisäkkäiset valitsimet.

Haluamme yleensä, että tiettyjä tyylisääntöjä sovelletaan kaikkeen verkkosivustoon, kuten tietty koko tai fontti, jota kaikki kappale (p) -tekstit käyttävät oletuksena. Samoin HTML voi näyttää sekavalta, jos näitä tyylisääntöjä sovelletaan kullekin yksittäiselle kappaleelle eikä koko verkkosivustolle.

Sisäkkäinen CSS on mahdollista käyttämällä CSS-yhdistelmiä, kuten CSS-jälkeläisten valitsinta. "Pesimällä" CSS vanhemman valitsimen alle, on mahdollista kertoa verkkosivustolle nopeasti ja tehokkaasti miltä tietyn valitsimen pitäisi näyttää jokaisessa skenaariossa, johon CSS-vanhempaan viitataan.

Sisäkkäisen CSS-valitsimen käyttäminen antaa meille mahdollisuuden soveltaa samoja sääntöjä sivuston useiden osien muotoiluun kerralla, jolloin voimme päästä toimeen pienemmällä työllä pitäen samalla HTML: n puhtaana ja koskemattomana.

instagram story viewer