Mikä on CSS Descendant Selector?

HTML-dokumentin rakenne on samanlainen kuin perhepuu. Perheeseesi, sinulla on vanhempasi ja muut, jotka tulivat ennen sinua. Nämä ovat esivanhempiasi. Lapset ja ne, jotka tulevat tuon puun jälkeen, ovat sinun jälkeläisesi. HTML toimii samalla tavalla. Elementit, jotka ovat muiden elementtien sisällä, ovat niiden jälkeläisiä. Esimerkiksi koska lähes jokainen HTML-elementti on -tunnisteiden sisällä, ne olisivat tämän elementin jälkeläisiä. Tämä suhde on tärkeä ymmärtää, kun aloitat työskentelyn CSS: llä ja kohdistat tiettyjä elementtejä visuaalisten tyylejen soveltamiseen.

CSS Descendant Selectors

CSS-jälkeläinen valitsin koskee elementtejä, jotka ovat toisen elementin sisällä (tai tarkemmin sanottuna, elementti, joka on toisen elementin jälkeläinen). Esimerkiksi järjestämättömässä luettelossa on tunniste, jonka tunnisteet ovat jälkeläisiä. Käytetään seuraavaa HTML: tä esimerkkinä:

• tämä on linkki

  LI-tunnisteet ovat UL-tunnisteen jälkeläisiä. A-tunniste on sekä LI- että jälkeläisen (UL) jälkeläinen jälkeläinen. Jos ajattelet ajatella tätä käyttämällä perhettä, esimerkiksi

  olisi vanhempi,
  • olisi elementin lapsi ja olisi
  • : n lapsi ja lapsen lapsen lapsi
    .

    Joten miten kohdistat tiettyjä elementtejä Web-sivulle käyttämällä näitä jälkeläisiä valitsimia? Ensin sinun on määritettävä jälkeläisvalitsimet käyttämällä kahta (tai useampaa) tyyppivalitsinta, jotka on erotettu toisistaan.

    li a {teksti-sisustus: ei yhtään; }

    Tässä esimerkissä tyylit koskisivat vain linkkielementtiä (), joka on luettelomerkkielementin (

    • ) jälkeläinen. Kaikki muut sivun linkit, jotka eivät ole luettelokohteen jälkeläisiä, eivät saisi tätä tyyliä.

      Yksi tärkeä asia muistaa on, että ei ole väliä, kuinka monta tunnistetta ne ovat tunnisteiden välillä, joita voit käyttää jälkeläisvalitsimessa. Jos toinen elementti on suljettu mihin tahansa ensimmäiseen elementtiin, se valitaan jälkeläiseltä.

      Jos haluat valita kaikki ul elementit, jotka alasivat ul elementeistä, kirjoittaisit:

      ul a {teksti-sisustus: ei mitään; }

      Nämä tyylejä koskevat kaikki linkit, jotka ovat luettelokohteen jälkeläisiä. Voit myös kirjoittaa tämän valitsimen

      ul li a {teksti-decoration: none; }

      Tämä on jälkeläinen valitsin, joka käyttää useampaa kuin kahta tyypin valitsinta. Tässä tapauksessa tämä koskee linkkejä, jotka ovat sisäpuolella luettelokohteena ja myös järjestämättömän luettelon sisällä.

      Käytä luokan valitsimia ja ID-valitsimia

      Valitsimista, joista olet laskenut, ei tarvitse aina olla jälkeläisiä. Kuvittele esimerkiksi, että sinulla on sivuston alue (kuten jako), jolla on ID-ominaisuus "mainostaulu". Voit määrittää jälkikohtaisen valitsimen pois kyseisestä tunnuksesta:

      #billboard ul {taustaväri: #ccc; }

      Tämä muotoilee järjestämättömän luettelon, joka on elementin jälkeläinen, jolla on tunnus "mainostaulu". Voit tehdä saman luokan arvot.

      div.billboard ul {taustaväri: #ccc; }

      Tämä olettaa, että divisioonilla on luokka-arvo "mainostaulu". Yllä oleva CSS muokata

      -elementin minkä tahansa divisioonan sisällä, jolla on tämä luokkaarvo.

      Voit saada todella raskas ja verbose kanssa jälkeläinen valitsimet. Jos esimerkiksi käytät Dreamweaveria HTML-koodin kirjoittamiseen, on olemassa asetus, kun lisäät uusia CSS-sääntöjä, jotka automaattisesti luo valinnan kohdistimen sijainnin perusteella kyseiselle sivulle. Mitä Dreamweaver tekee tässä tapauksessa, on luoda villisti verbaalinen ja pitkä jälkeläinen valitsin. Tämä paljon spesifisyyttä ei ole välttämätöntä CSS : n toimimiseksi. Haluat löytää tasapainon jäljellä olevan valitsimen välillä, joka on tarpeeksi tarkka, jotta voit porata tarkat elementit, joita tarvitset (ilman muotoilua sellaisia, joita et halua vaikuttaa) ilman CSS-sääntöjä, joilla on liian heikkoja valitsimia suuri.