Kaj je izbirnik potomcev CSS?

Struktura dokumenta HTML je podobna družinskemu drevesu. V vaši družini imate svoje starše in druge, ki so prišli pred vami. To so tvoji predniki. Otroci in tisti, ki pridejo po tebi na tisto drevo, so vaši potomci. HTML deluje podobno. Elementi, ki so znotraj drugih elementov, so njihovi potomci. Na primer, ker je skoraj vsak element HTML v oznakah , bi bili potomci teh elementov . To razmerje je pomembno za razumevanje, ko začnete delati s CSS in morate ciljati določene elemente za uporabo vizualnih stilov.

CSS potomcev

Izbirnik potomcev CSS se nanaša na elemente, ki so znotraj drugega elementa (ali natančneje naveden, element, ki je potomec drugega elementa). Na primer, nekoren seznam ima oznako z oznakami kot potomci. Uporabimo naslednji HTML kot primer:

• to je povezava

  Oznake LI so potomci UL oznake. Oznaka A je potomec obeh oznak LI (otrok) in oznak UL (vnukinji). Če razmišljate o tem z uporabo primera družinskega drevesa, bi bil

  starš, bi bil
  • otrok tega elementa, bi bil otrok
  • in vnuk
    .

    Torej, kako bi ciljali določene elemente na spletni strani z uporabo teh potomcev selektorjev? Najprej morate določiti izbirnike potomcev z uporabo dveh (ali več) tipov izbirnikov, ločenih s presledki.

    li {tekst-dekoracija: nič; }

    V tem primeru bi slogi veljali samo za element povezave (), ki je potomec elementa seznama (

    • ). Vse druge povezave na strani, ki niso potomci elementa seznama, ne bi dobili tega sloga.

      Ena pomembna stvar, ki si jo morate zapomniti, je, da ni važno, koliko oznak so med oznakami, ki jih morda uporabljate v izbirniku potomcev. Če je drugi element zaprt kjerkoli v prvem elementu, bo izbran kot potomec.

      Če želite izbrati vsa sidra, ki so potekala od ul elementov, bi napisali:

      ul {{text-decoration: none; }

      Zdaj bodo ti slogi veljali za katero koli povezavo, ki je potomec elementa seznama. Ta izbirnik lahko tudi napišete

      ul li {tekst-dekoracija: nič; }

      To je izbirnik potomcev, ki uporablja več kot dva izbirnika tipa. V tem primeru bi to veljalo za povezave, ki so znotraj seznama in tudi znotraj neurejenega seznama.

      Uporaba izbirnikov razredov in izbirnikov ID

      Selektorjem, od katerih se spuščate, ni treba vedno vnašati potomcev. Predstavljajte si, na primer, da ste imeli območje spletnega mesta (kot delitev) z atributom ID-ja »oglasne deske«. Lahko bi nastavili izbirnik potomcev tega ID-ja:

      #billboard ul {background-color: #ccc; }

      S tem bi se stiliziral neurejen seznam, ki je potomec elementa z ID-jem "oglasne deske". Enako lahko storite tudi za vrednosti razreda.

      div.billboard ul {background-color: #ccc; }

      To predpostavlja, da ima oddelek razredno vrednost "billboard". CSS zgoraj bi slog elementa

      oblikovala znotraj katere koli razdelke, ki ima to vrednost razreda.

      Lahko dobite resnično močne in pametne s potomci selektorji. Če na primer uporabite Dreamweaver za pisanje vaše HTML kode , obstaja nastavitev, ko dodate nova pravila CSS, ki bodo samodejno ustvarili izbirnik na podlagi postavitve kazalca na tej strani. Kaj Dreamweaver v tem primeru je ustvariti divje verbose in dolgotrajen potomec selektor. Ta posebnost ni potrebna za delovanje CSS . Kaj želite storiti je najti ravnovesje med izbirnikom potomcev, ki je dovolj natančen, da lahko spustite natančne elemente, ki jih potrebujete (brez tistih, ki jih ne želite vplivati), ne da bi imeli pravila CSS, ki imajo selektorje, ki so preveč velik.