Co je točírka CSS?

Struktura dokumentu HTML je podobná rodokmenu. Ve vaší rodině máte své rodiče a další, kteří přišli před vámi. To jsou ti předci. Děti a ti, kteří za tebou přijdou na tomto stromu, jsou vaši potomci. HTML pracuje podobným způsobem. Prvky, které jsou uvnitř jiných prvků, jsou jejich potomci. Například, protože téměř každý element HTML je uvnitř značky , budou potomkem elementů . Tento vztah je důležitý pro pochopení, když začnete pracovat s CSS a potřebujete zaměřit na konkrétní prvky pro použití vizuálních stylů.

CSS descendant selectors

Výběr selektoru CSS se vztahuje na prvky, které jsou uvnitř jiného prvku (nebo přesněji řečeno, prvek, který je potomkem jiného prvku). Neoznačený seznam například obsahuje značku se značkami jako potomky. Pro příklad použijeme následující HTML:

• toto je odkaz

  Značky LI jsou potomky značky UL. Značka A je potomkem obou značek LI (potomka dítěte) a UL (potomka vnučka). Pokud si myslíte, že o tom přemýšlíte pomocí příkladu rodokmenu,

  by byl rodič,
  • by byl dítou tohoto elementu a by byl dítětem
  • a vnukem
    .

    Tak jak byste zaměřil konkrétní prvky webové stránky pomocí těchto selektorů? Nejprve musíte definovat selektory pro odběratele pomocí dvou (nebo více) voličů typu oddělených mezerami.

    li a {text-dekorace: žádná; }}

    V tomto příkladu by se styly vztahovaly pouze na element odkazu (), který je potomkem elementu seznamu (

    • ). Všechny ostatní odkazy na stránce, které nejsou potomkem položky seznamu, by tento styl nezískaly.

      Důležitá věc, kterou si musíme pamatovat, je, že nezáleží na tom, kolik značek se nachází mezi značkami, které můžete použít ve svém selektivu potomka. Pokud je druhý prvek uzavřený kdekoliv v prvním prvku, bude vybrán jako potomník.

      Chcete-li vybrat všechny kotvy, které pocházejí z elementů ul, napište:

      ul a {text-dekorace: žádná; }}

      Nyní se tyto styly vztahují na všechny odkazy, které jsou potomkem položky seznamu. Můžete také napsat tento selektor

      ul li a {text-dekorace: žádná; }}

      Jedná se o výběr potomka, který používá více než dva typy voličů. V tomto případě by se to týkalo odkazů, které jsou uvnitř seznamu jako seznamu, a také uvnitř neuspořádaného seznamu.

      Použití tříd a selektorů ID

      Voliče, ze kterých sestupujete, nemusí být vždy typu potomků. Představte si například, že jste měli oblast webu (jako divize) s atributem ID "billboard". Mohli byste z tohoto identifikačního čísla nastavit sestupného selektora:

      #billboard ul {barva pozadí: #ccc; }}

      To by mělo styl neoordinovaný seznam, který je potomkem prvku s ID "billboard". Stejně můžete provést i hodnoty tříd.

      div.billboard ul {barva pozadí: #ccc; }}

      To předpokládá, že dělení má hodnotu třídy "billboard". CSS výše bude stylovat element

      uvnitř libovolného oddílu, který má tuto hodnotu třídy.

      Můžete získat opravdu těžké a hloupé volby s následovateli. Pokud například použijete Dreamweaver k napsání kódu HTML , je nastavení při přidání nových pravidel CSS, které automaticky vytvoří volič na základě umístění kurzoru na dané stránce. Co dělá aplikace Dreamweaver v tomto případě, je vytvořit divoký podrobný a dlouhý výběr potomků. Tato specifičnost není pro vaši práci CSS nezbytná. Co chcete udělat, je najít rovnováhu mezi selektorem potomka, který je dostatečně specifický, abyste mohli projít přesné prvky, které potřebujete (bez stylových, které nechcete ovlivňovat), aniž byste museli mít pravidla CSS, která mají voliče, které jsou příliš velký.