Wat is 'n CSS Descendant Selector?

Die struktuur van 'n HTML-dokument is soortgelyk aan 'n stamboom. In jou gesin het jy jou ouers en ander wat voor jou gekom het. Dit is jou voorouers. Kinders en diegene wat na jou toe kom, is jou afstammelinge. HTML werk op 'n soortgelyke manier. Elemente wat binne-in ander elemente is, is hul afstammelinge. Byvoorbeeld, aangesien byna elke HTML-element binne tags is, sal hulle 'n afstammeling van daardie -elemente wees. Hierdie verhouding is belangrik om te verstaan ​​wanneer jy met CSS begin werk en spesifieke elemente moet rig om visuele style toe te pas.

CSS Descendant Selectors

'N CSS-afstammelinge kieser is van toepassing op die elemente wat binne 'n ander element voorkom (of meer akkuraat gestel, 'n element wat 'n afstammeling van 'n ander element is). Byvoorbeeld, 'n ongeordende lys het 'n merker met tags as afstammelinge. Kom ons gebruik die volgende HTML as voorbeeld:

• dit is 'n skakel

  Die LI-tags is afstammelinge van die UL-tag. Die A-merker is 'n afstammeling van beide die LI (afstammeling van die kind) en UL (kleinkind afstammelinge). As u daaraan dink, gebruik die voorbeeld van die stamboom die

  die ouer, sou die
  • daardie kind se kind wees, en die sou die kind van die
  • en die kleinkind van die
    .

    So, hoe sou jy spesifieke elemente in 'n webblad teiken deur hierdie afstammelinge te gebruik? Eerstens moet jy afstammelinge kiesors definieer deur twee (of meer) tipe keurders wat deur spasies geskei is, te gebruik.

    li a {text-decoration: none; }

    In die voorbeeld sal die style slegs van toepassing wees op 'n skakelelement () wat 'n afstammeling van 'n lysitemelement is (

    • ). Alle ander skakels op die bladsy wat nie 'n afstammeling van 'n lysitem is nie, sal nie hierdie styl kry nie.

      Een belangrike ding om te onthou, is dat dit nie saak hoeveel etikette hulle tussen die tags wat jy in jou afstammelinge kies, gebruik nie. As die tweede element enige plek binne die eerste element ingesluit word, sal dit as 'n afstammeling gekies word.

      As u alle ankers wat van ul-elemente afstam, wil kies, sal u skryf:

      ul a {text-decoration: none; }

      Nou, hierdie style sal van toepassing wees op enige skakel wat 'n afstammeling van 'n lysitem is. U kan ook hierdie selector skryf

      ul li a {text-decoration: none; }

      Dit is 'n afstammelinge wat meer as twee tipe keurders gebruik. In hierdie geval sal dit van toepassing wees op skakels wat binne-in as lysitem is en ook binne van 'n ongeordende lys.

      Gebruik Klaskeuses en ID-keurders

      Die keurders wat jy afstam, hoef nie altyd afstammelinge te wees nie. Verbeel jou byvoorbeeld dat jy 'n area van die webwerf gehad het (soos 'n afdeling) met 'n ID-kenmerk van 'billboard'. Jy kan 'n afstammelinge kies wat van die ID af is:

      #billboard ul {agtergrondkleur: #ccc; }

      Dit sou die ongeordende lys wat 'n afstammeling van 'n element met 'n ID van "billboard" is, stileer. Jy kan dieselfde doen vir klaswaardes.

      div.billboard ul {agtergrondkleur: #ccc; }

      Dit veronderstel dat die afdeling 'n klaswaarde van "billboard" het. Die CSS hierbo sal die

      -element binne van enige afdeling wat hierdie klaswaarde het, stileer.

      Jy kan regtig swaarhartig en verbasend raak met afstammelinge. Byvoorbeeld, as jy Dreamweaver gebruik om jou HTML-kode te skryf, is daar 'n instelling wanneer jy nuwe CSS-reëls byvoeg wat die selector outomaties sal skep, gebaseer op die plasing van jou wyser op daardie bladsy. Wat Dreamweaver in hierdie gevalle doen, skep 'n wild en langverwante afstammelinge. Daar is nie soveel spesifisiteit nodig vir jou CSS om te werk nie. Wat jy wil doen, is om 'n balans te vind tussen 'n afstammelingskepper wat spesifiek genoeg is sodat jy kan afbreek na die presiese elemente wat jy nodig het (sonder stilering wat jy nie wil beïnvloed nie) sonder om CSS-reëls te hê wat selektiewe keuses het. groot.