Wat ass e CSS Descendant Selector?

D'Struktur vun engem HTML Dokument ass ähnlech wéi een Familjenbaum. An Ärer Famill hutt Dir Är Elteren an anerer déi virun Iech komm sinn. Dës sinn Är Vorfahren. Kanner an déi Leit, déi Dir no dësem Bam kënnt, sinn Är Nokommen. HTML funktionnéiert ähnlech. Elementer déi dobannen vun aneren Elementer sinn hir Nokommen. Zum Beispill, well bal all HTML Element am Inn vum Variatiounen ass, da si se ee Nofolger vun deem Elementer. Dës Bezuelung ass wichteg fir ze verstoen wann Dir mat CSS mat schaffen an Dir musst spezifesch Elementer fir spezifesch Stiler anzebréngen.

CSS Descendant Selectors

E CSS Nofolger selector gëlt fir d'Elementer déi an engem aneren Element sinn (oder méi genau soen, en Element, dat e Nofolger vun engem anere Element ass). Zum Beispill eng ongeuerdnete Lëscht huet e Tag mat Bezeechnungen als Nokommen. Loosst dëse HTML als Beispiller benotzen:

• dat ass e Link

  D'LI-Tags sinn Nokommen vum UL-Tag. De A Tag ass e Nofolger vu LI (Nofolger) an UL (Enkelkanner Nimm). Wann Dir denkt drun iwwer denken iwwer dat benotzt mat dem Stammbaum Beispiel, wäerte de

  den Elterendeel sinn, de
  • wär dat Element vum Kand, an de wär de Kanner vum
  • an de Enkelkand vum
    .

    Also, wéi wëlle Dir spezifesch Elementer an enger Websäit déi dës Nofftel selectoren zielen? Als éischt, Dir musst descendants selektoren definéieren andeems Dir zwee (oder méi) Typ Selektoren, déi duerch Leerplazen getrennt sinn, benotzt.

    li [Text-Dekor: keng; }}

    An dësem Beispill wäerte d'Stiler nëmmen op e Link Element (), deen e Nofolger vun engem List Element Element (

    • ) ass. All aner Links op der Säit déi net Nofolger vun engem Lëscht sinn, kritt dës Form net.

      Eng wichteg Saach fir ze erënneren, datt et wichteg ass, wéi vill Tags si vun den Tags sinn, déi Dir an Ärem Nofolger selector benotzt. Wann dat zweet Element iergendwou am éischte Element zouhëlt, gëtt et als Nofolger gewielt.

      Wann Dir wëllt all Düsen, déi vun ul Elementer niddergeschriwwe wielt wiele w

      ul a {Textdekoratioun: keng; }}

      Elo ginn dës Stile bei all Link geliwwert datt e Nofolger vun engem Lëscht ass. Dir kënnt och dësen Auswiel schreiwen

      ul li en {Text-Dekor: keng; }}

      Dëst ass ee Nofolgerekalator, deen méi wéi zwou Zort Selektoren benotzt. An dësem Fall gëlt dëst fir Links, déi an der Lëscht als Lëschtepotential an och an engem ongezwuelte Lëscht sinn.

      Verwenden vun Class Selectors an ID Selektoren

      D'Siler, déi Dir riicht aus net muss ëmmer nach Nimm kréien. Zum Beispill, stellen Iech eng Zone vum Site (wéi eng Divisioun) mat engem ID Attribut vun "Billboard". Dir kënnt e Nofolger selector aus der ID setzen:

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

      Dëst géif d'Unuerdnungs Lëscht Stil benotzen, déi en Nofolger vun engem Element mat enger ID vun "Billboard" ass. Dir kënnt d'selwecht fir d'Klass.

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

      Dëst setzt un datt d'Divisioun eng Klass vu "Billboard" ass. De CSS above wäert d'

      Element innerhalb vun enger Divisioun setzen déi dëse Klassesäit huet.

      Dir kënnt wierklech houfreg opfëllen a verbose mat Nofrist Selecturen. Zum Beispill, wann Dir Dreamweaver benotzt fir Äre HTML Code ze schreiwen , da gëtt et eng Astellung, wann Dir nei CSS Regelen addiert, déi den Selektioun automatesch op der Platzéierung vum Cursor op dëser Säit erstellen. Wat d' Dreamweaver an dësen Exemplaren mécht, ass e wuessent verbosege laangen Nofolger selector. Dat vill Spezifitéit ass net néideg fir Är CSS ze schaffen. Wat Dir maache wëllt, ass e Balance tëscht engem Nofolger selector deen spezifesch genuch ass fir datt Dir op déi exakt Elementer déi Dir braucht dropp ze maachen (ouni Styling déi Dir net wëllt uginn) ouni CSS Regelen déi Selektoren hunn déi iwwer grouss ass.