Čo je to počiatočný selektor CSS?

Štruktúra dokumentu HTML je podobná rodokmeňu. Vo vašej rodine máte svojich rodičov a ostatných, ktorí prišli pred vás. Toto sú tvoji predkovia. Deti a tí, ktorí po tebe idú na tomto strome, sú tvojimi potomkami. HTML funguje podobným spôsobom. Prvky, ktoré sú vnútri iných prvkov, sú ich potomkovia. Napríklad, pretože takmer každý prvok HTML je vo vnútri značiek , budú potomkom elementov . Tento vzťah je dôležitý na pochopenie, keď začnete pracovať so službou CSS a potrebujete zacieliť na konkrétne prvky, aby ste mohli použiť vizuálne štýly.

CSS descendant Selectors

Výber dediča CSS sa vzťahuje na prvky, ktoré sú vnútri iného prvku (alebo presnejšie povedané, prvok, ktorý je potomkom iného prvku). Napríklad neusporiadaný zoznam má značku s označeniami ako potomkov. Ako príklad použite nasledujúci HTML:

• toto je odkaz

  Značky LI sú potomkami značky UL. Značka A je potomkom obidvoch značiek LI (potomok dieťaťa) a UL (vnučka potomka). Ak premýšľate nad tým, že by ste to mali použiť na príklade rodokmeňa,

  by bol rodičom,
  • by bol dieťaťom tohto elementu a by bolo dieťaťom
  • a vnuk
    .

    Takže ako by ste zacielili na určité prvky na webovej stránke pomocou týchto selektorov? Najskôr musíte definovať výberu potomkov pomocou dvoch (alebo viacerých) typov voličov oddelených medzerami.

    li a {text-decoration: žiadne; }

    V tomto príklade by sa štýly vzťahovali iba na prvok odkazu (), ktorý je potomkom prvku zoznamu položiek (

    • ). Všetky ostatné odkazy na stránke, ktoré nie sú potomkom položky zoznamu, nebudú mať tento štýl.

      Jedna dôležitá vec, ktorú treba mať na pamäti, je, že nezáleží na tom, koľko značiek sa nachádzajú medzi značkami, ktoré používate vo svojom výbere potomkov. Ak je druhý prvok uzavretý kdekoľvek v prvom prvku, bude vybraný ako potomok.

      Ak chcete vybrať všetky ukotvenie, ktoré pochádza z elementov ul, napíšeme:

      ul a {text-dekorácia: žiadne; }

      Teraz sa tieto štýly vzťahujú na akýkoľvek odkaz, ktorý je potomkom položky zoznamu. Môžete tiež napísať tento volič

      ul li a {text-dekorácia: žiadne; }

      Toto je nadradený selektor, ktorý používa viac ako dva selektory typu. V takom prípade by to platilo pre odkazy, ktoré sú vnútri ako zoznam-položka a tiež vnútri neusporiadaného zoznamu.

      Použitie výberu tried a výberu identifikátorov

      Volič, od ktorého sa zostupujete, nemusia byť vždy typu potomkov. Predstavte si napríklad, že ste mali oblasť lokality (ako divízia) s ID atribútom "billboard". Mohli by ste z tohto identifikátora nastaviť selektora potomkov:

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

      Takto by sa štýloval neusporiadaný zoznam, ktorý je potomkom prvku s ID "billboard". Môžete urobiť to isté pre hodnoty triedy.

      div.billboard ul {farba pozadia: #ccc; }

      Predpokladá sa, že rozdelenie má hodnotu triedy "billboard". CSS vyššie by štýl element

      vo vnútri ktorejkoľvek divízie, ktorá má túto hodnotu triedy.

      Môžete získať naozaj ťažké-ruky a verbose s descendant selektory. Ak napríklad použijete program Dreamweaver na napísanie kódu HTML , pri pridávaní nových pravidiel CSS, ktoré automaticky vytvoria selektor na základe umiestnenia kurzora na tejto stránke, sa použije nastavenie. Čo je v tomto prípade riešenie Dreamweaver , je vytvorenie voľne preloženého a zdĺhavého selektora potomkov. Toľko špecifickosti nie je pre váš CSS potrebný. Čo chcete urobiť, je nájsť rovnováhu medzi selektormi potomkov, ktoré sú dostatočne špecifické, aby ste mohli rozvinúť presné prvky, ktoré potrebujete (bez tých, ktoré by ste si nemali žiadať) bez toho, aby mali pravidlá CSS, veľký.