Unsa ang usa ka CSS Descendant Selector?

Ang istruktura sa usa ka dokumento nga HTML susama sa usa ka family tree. Sa imong pamilya, adunay imong mga ginikanan ug uban pa nga miabut sa imong atubangan. Kini ang imong mga katigulangan. Ang mga bata ug kadtong mosunod kanimo sa kahoy mao ang imong mga kaliwat. Ang HTML nagtrabaho sa susama nga paagi. Ang mga elemento nga anaa sa sulod sa ubang mga elemento mao ang ilang mga kaliwat. Pananglitan, tungod kay hapit matag elemento sa HTML anaa sa sulod sa mga tag sa , mahimo silang usa ka kaliwat sa elemento nga . Ang kini nga relasyon importante nga masabtan kung magsugod ka sa pagtrabaho sa CSS ug kinahanglan nga target ang mga piho nga mga elemento sa paggamit sa mga estilo sa biswal.

CSS Descendant Selectors

Ang CSS descendant selector magamit sa mga elemento nga anaa sa sulod sa laing elemento (o mas tukma nga gipahayag, usa ka elemento nga usa ka kaliwat sa laing elemento). Pananglitan, ang usa ka unordered nga lista adunay usa ka tag uban ang mga tag isip mga kaliwat. Gamiton nato ang mosunod nga HTML isip pananglitan:

• kini usa ka link

  Ang mga tag sa LI mao ang mga kaliwat sa tag UL. Ang usa ka tag usa ka kaliwat sa duha nga LI (kaliwat sa bata) ug UL (apo sa apo). Kung naghunahuna ka mahitungod sa paghunahuna mahitungod niini gamit ang panig-ingnan sa punoan sa pamilya, ang

  mao ang ginikanan, ang
  • mahimo nga bata nga elemento, ug ang mga anak sa
  • ug ang ang
    .

    Busa unsaon nimo pag-target ang piho nga mga elemento sa usa ka web page gamit kining mga pagpili sa kaliwat? Una, kinahanglan nimo nga ipasabut ang mga pinili sa kaliwat pinaagi sa paggamit sa duha ka (o labaw pa) nga mga tigpili nga tipahi nga gibulag sa mga luna.

    li a {text-decoration: wala; }

    Sa maong pananglitan, ang mga estilo magamit lamang sa usa ka elemento sa sumpay () nga usa ka kaliwat sa elemento sa list-item (

    • ). Ang tanan nga lain nga mga sumpay sa panid nga dili kaliwat sa usa ka lista nga butang dili makabaton niini nga estilo.

      Ang usa ka importante nga butang nga hinumduman mao nga dili igsapayan kung pila ka mga tag kini anaa sa tunga sa mga tag nga imong gigamit sa imong kaliwat nga selector. Kung ang ikaduha nga elemento gilakip sa bisan asa sulod sa unang elemento kini gipili ingon nga usa ka kaliwat.

      Kung gusto nimo mapili ang tanan nga mga angkla nga gikan sa ul elemento, imong isulat:

      ul usa {text-decoration: wala; }

      Karon, kini nga mga estilo magamit sa bisan unsang sumpay nga usa ka kaliwat sa lista nga butang. Mahimo usab nimo isulat kining tigpili

      ul li a {text-decoration: wala; }

      Kini usa ka tigpili nga kaliwat nga naggamit sa sobra sa duha ka mga tigpili. Sa kini nga kaso, kini magamit sa mga link nga anaa sa sulod isip list-item ug usab sa sulod sa usa ka unordered nga listahan.

      Paggamit sa mga Class Selectors ug ID Selectors

      Ang mga tigpili nga imong nanganaog gikan sa dili kinahanglan nga pirmahan nga mga kaliwatan. Pananglitan, hunahunaa nga adunay usa ka dapit sa site (sama sa usa ka dibisyon) nga may ID nga hiyas sa "billboard". Mahimo nimong tukuron ang usa ka kaliwat nga tigpili gikan sa ID:

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

      Kini ang estilo sa unordered list nga usa ka kaliwat sa usa ka elemento nga adunay ID sa "billboard". Mahimo nimo ang sama alang sa mga mithi sa klase.

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

      Kini naghuna-huna nga ang division adunay klase nga bili sa "billboard". Ang CSS sa ibabaw mag-istilo sa

      elemento sa sulod sa bisan unsang dibisyon nga adunay kini nga bili sa klase.

      Mahimo ka nga mabug-at ug mapig-oton sa mga pinili nga kaliwat. Pananglitan, kon imong gamiton ang Dreamweaver aron isulat ang imong HTML code , adunay usa ka kahimtang sa dihang ikaw nagdugang og bag-ong mga lagda sa CSS nga awtomatik nga maghimo sa tigpili nga gipasukad sa pagbutang sa imong cursor niana nga panid. Ang gibuhat sa Dreamweaver niining mga higayona mao ang pagmugna og usa ka kinaiya nga binag-o ug tag-as nga kaliwat nga tigpili. Dili kaayo kana nga pagtino dili kinahanglan alang sa imong CSS nga magtrabaho. Ang gusto nimo nga buhaton mao ang pagpangita sa usa ka balanse tali sa usa ka kaliwat nga tigpili nga igo nga espesipiko aron nga ikaw makahimo sa pag-drill ngadto sa eksaktong mga elemento nga imong gikinahanglan (nga walay mga estilo nga dili nimo gusto nga makaapekto) nga walay mga lagda sa CSS nga adunay mga nagpili nga sobra ra dako.