Mi az a CSS Descendant Selector?

A HTML-dokumentum szerkezete hasonló a családfához. A családodban van a szüleid és mások, akik eljöttek előtted. Ezek az ő ősei. A gyermekek és azok, akik után jönnek azon a fán, a te leszármazottaid. A HTML hasonló módon működik. A többi elem belsejében lévő elemek a leszármazottaik. Például, mivel majdnem minden HTML elem a címkék belsejében van, ezek a elemek leszármazottai lennének. Ez a kapcsolat fontos, hogy megértse, mikor kezdje el használni a CSS-t, és speciális elemeket kell megcéloznia a vizuális stílusok alkalmazására.

CSS Descendant Selectors

A CSS utódválasztó az elemek között található, amelyek egy másik elemen belül helyezkednek el (vagy pontosabban meg vannak határozva, egy elem, amely egy másik elem leszármazottja). Például egy rendezetlen listának van egy címkéje, amelynek tagjai leszármazottak. Használjuk a következő HTML-kódot:

• ez egy link

  Az LI címkék az UL-címke leszármazottai. Az A tag mind a LI (gyermek utód), mind az UL (unokái utód) címkék leszármazottja. Ha a családfa példájára gondolsz, akkor a

  lenne a szülő, az
  • az adott elem gyermeke lenne, és a lenne a
  • gyermeke és az unokája a
    .

    Tehát hogyan célozhat meg konkrét elemeket egy weboldalon ezeknek a leszármazott kiválasztóknak? Először meg kell határozni a leszármaztatott szelektorképeket két (vagy több) típusú szelektor segítségével, amelyeket szóközzel elválasztottak.

    li a {text-decoration: nincs; }

    Ebben a példában a stílusok csak egy link elemre () vonatkoznak, amely egy listatagelem (

    • ) leszármazottja. Az oldal többi olyan linkje, amelyek nem szerepelnek a listatagban, nem kapná ezt a stílust.

      Fontos megjegyezni, hogy nem számít, hány címke van közöttük a címkék között, amelyeket a leszármazotód választójánál használhat. Ha a második elem az első elem belsejében van, akkor leszármazottként lesz kiválasztva.

      Ha ki szeretné választani az összes elemet, amely az ul elemekből származik, írja:

      ul a {text-decoration: none; }

      Ezek a stílusok minden olyan hivatkozásra vonatkoznak, amely egy listaelem leszármazottja. Ezt a választót is írhatod

      ul li a {text-decoration: none; }

      Ez egy utódválasztó, amely több mint két típusválasztót használ. Ebben az esetben ez a listaelemek belsejében lévő és a rendezetlen listán belül található hivatkozásokra is vonatkozik.

      Osztályválasztók és ID választók használata

      A kiválasztó elemek, amelyekről lefelé haladtál, nem mindig mindig leszármazottai legyenek. Képzeld el például, hogy van egy olyan területe a webhelynek (például egy megosztottságnak), amely egy "billboard" azonosítójával rendelkezik. Létrehozhat egy leszármazottválasztót az azonosítóból:

      #billboard ul {háttérszín: #ccc; }

      Ez olyan rendezetlen listát állít elő, amely az "óriásplakát" azonosító elemének leszármazottja. Ugyanazt teheted az osztály értékeknél is.

      div.billboard ul {háttérszín: #ccc; }

      Ez azt feltételezi, hogy a szétválásnak az "óriásplakát" osztályértékével kell rendelkeznie. A fenti CSS felépítené azt az

      elemet, amely bármely osztáson belül található, és rendelkezik ezzel az osztályértékkel.

      Nagyon nehézkézetes és szórakoztató lesz a leszármazott kiválasztókkal. Ha például a Dreamweaveret írja meg a HTML kód megírásához, akkor van olyan beállítás, amikor új CSS-szabályokat ad hozzá, amelyek automatikusan hozzák létre a választót a kurzor elhelyezésekor az adott oldalon. Ebben a példában a Dreamweaver egy vadul szórakoztató és hosszadalmas leszármazott választót hoz létre. Ez a sok sajátosság nem szükséges, hogy a CSS működjön. Azt akarod elérni, hogy egyensúlyt találj egy olyan leszármazottválasztó között, amely elég specifikus ahhoz, hogy a pontos elemeket meg lehessen szűkíteni (anélkül, hogy azokat meg szeretnéd-e befolyásolni), anélkül, hogy olyan CSS-szabályok lennének, amelyeknek szelektora túlságosan nagy.