Hvað er CSS Descendent Selector?

Uppbygging HTML skjals er svipað og ættartré. Í fjölskyldunni hefurðu foreldra þína og aðra sem komu fyrir þér. Þetta eru forfeður þínir. Börn og þeir sem koma eftir þér á því tré eru afkomendur þínir. HTML virkar á svipaðan hátt. Þættir sem eru inni í öðrum þáttum eru afkomendur þeirra. Til dæmis, þar sem næstum sérhver HTML þáttur er inni í tags, myndu þeir verða afkomandi þættir. Þetta samband er mikilvægt að skilja þegar þú byrjar að vinna með CSS og þarf að miða á tiltekna þætti til að beita sjónrænum stílum.

CSS Descendants Selectors

A CSS afkomendur velja um þá þætti sem eru innan annars þáttar (eða nákvæmari tilgreint, þáttur sem er afkomandi annarrar þáttar). Til dæmis hefur óflokkað listi merki með merkjum sem afkomendur. Við skulum nota eftirfarandi HTML sem dæmi:

• þetta er tengill

  LI merkin eru afkomendur UL merkisins. Merkið er afkomandi bæði LI (barnabarnsælandi) og UL (barnabarn afkomandi) merkimiða. Ef þú hugsar um að hugsa um þetta með því að nota ættartalið, þá myndi

  vera foreldrið,
  • væri barnið í frumefni og væri barnið
  • og barnabarnið
    .

    Svo hvernig myndir þú miða á tiltekna þætti á vefsíðu með þessum afkomendum? Í fyrsta lagi verður þú að skilgreina afkomendur valda með því að nota tvær (eða fleiri) tegundarvalar aðskilin með bilum.

    li {text-decoration: none; }

    Í því dæmi myndi stíllin aðeins gilda um tengiliður () sem er afkomandi af listatriðiþætti (

    • ). Allir aðrir tenglar á síðunni sem eru ekki afkomendur listaliða myndu ekki fá þessa stíl.

      Eitt mikilvægt atriði sem þarf að muna er að það skiptir ekki máli hversu mörg merki þau eru á milli merkjanna sem þú gætir notað í afkomendum þínum. Ef annar þátturinn er lokaður einhvers staðar innan fyrsta þáttarins verður hann valinn sem afkomandi.

      Ef þú vilt velja alla akkeri sem eru niður frá u.þ.b., myndirðu skrifa:

      ul {text-decoration: none; }

      Nú munu þessar stílar eiga við um hvaða tengil sem er afkomandi af listagrein. Þú gætir líka skrifað þennan val

      ul li a {text-decoration: none; }

      Þetta er afkomandi veljari sem notar fleiri en tvær tegundarvalarar. Í þessu tilviki myndi þetta eiga við um tengla sem eru innan eins og listatriði og einnig inni í óskráðum lista.

      Nota Class Selectors og ID Selectors

      The selectors sem þú ert að lækka frá þarf ekki að vera alltaf afkomendur. Til dæmis, ímyndaðu þér að þú hafir svæði svæðisins (eins og deild) með auðkenni eiganda "auglýsingaskilti". Þú gætir sett upp niðursveiflu af þessu tagi:

      #billboard ul {bakgrunnslitur: #ccc; }

      Þetta myndi stilla óflokkaðan lista sem er afkomandi af frumefni með auðkenni "auglýsingaskilti". Þú getur gert það sama fyrir gildi bekknum.

      div.billboard ul {bakgrunnslitur: #ccc; }

      Þetta gerir ráð fyrir að skiptin hafi bekkjarverðmæti "auglýsingaskilti". The CSS hér að ofan myndi stilla

      þáttinn inni í hvaða deild sem hefur þetta bekkjar gildi.

      Þú getur fengið mjög þungar hönd og sannað með afkomendum. Til dæmis, ef þú notar Dreamweaver til að skrifa HTML kóða þinn , þá er stilling þegar þú bætir við nýjum CSS reglum sem sjálfkrafa búa til valið byggt á staðsetningu bendilsins á þeim síðu. Hvað Dreamweaver gerir í þessum tilvikum er að búa til ótrúlega langan og langan afkomendurval. Þessi mikla sérhæfni er ekki nauðsynleg fyrir CSS þinn til að vinna. Það sem þú vilt gera er að finna jafnvægi á milli niðursvalenda sem er sértækt svo að þú getir borað niður í nákvæmlega þá þætti sem þú þarft (án þess að stilla þau sem þú vilt ekki hafa áhrif á) án þess að hafa CSS reglur sem hafa selectors sem eru of stór.