X'inhu Is-Selettur li Jiddependi CSS?

L-istruttura ta 'dokument HTML hija simili għal siġra tal-familja. Fil-familja tiegħek, għandek il-ġenituri tiegħek u oħrajn li daħlu qabel int. Dawn huma l-antenati tiegħek. It-tfal u dawk li jiġu warajk fuq dik is-siġra huma d-dixxendenti tiegħek. L-HTML jaħdem b'mod simili. Elementi li huma ġewwa ta 'elementi oħra huma d-dixxendenti tagħhom. Pereżempju, peress li kważi kull element HTML huwa ġewwa ta 'tikketti , ikunu dixxendenti ta' dawk l-elementi . Din ir-relazzjoni hija importanti biex tifhem meta tibda taħdem ma 'CSS u għandha bżonn timmira għal elementi speċifiċi biex tapplika stili viżivi.

Seletturi tan-Nixxija CSS

Selettur dixxendenti tas-CSS japplika għall-elementi li huma ġewwa element ieħor (jew iddikjarat b'mod aktar preċiż, element li huwa dixxendent ta 'element ieħor). Pereżempju, lista mhux organizzata għandha tikketta b'tikketti bħala dixxendenti. Ejjew nużaw l-HTML li ġej bħala eżempju:

• din hija link

  It-tikketti LI huma dixxendenti tat-tikketta UL. It-tikketta A hija dixxendent tat-tikketti tad-dixxenza LI (dixxendent tat-tfal) u ta 'UL (dixxendenti tan-neputi). Jekk taħseb li taħseb dwar dan billi tuża l-eżempju tas-siġra tal-familja,

  tkun il-ġenitur, il-
  • ikun it-tifel ta 'dak l-element, u l- tkun tifel tal-
  • u n-neputi l-
    .

    Allura kif tindirizza elementi speċifiċi f'paġni tal-web billi tuża dawn is-seletturi dixxendenti? L-ewwel, inti għandek tiddefinixxi seletturi dixxendenti billi tuża żewġ (jew aktar) seletturi tat-tip separati minn spazji.

    li a {text-decoration: xejn; }

    F'dak l-eżempju, l-istili japplikaw biss għal element ta 'rabta () li huwa dixxendent ta' element ta 'element tal-lista (

    • ). Ir-rabtiet l-oħra kollha fuq il-paġna li mhumiex dixxendenti ta 'oġġett tal-lista ma jkollhomx dan l-istil.

      Ħaġa waħda importanti li tiftakar hi li ma jimpurtax kemm hemm tikketti li huma bejn it-tikketti li tista 'tkun qed tuża fis-selettur tad-dixxendent tiegħek. Jekk it-tieni element huwa magħluq kullimkien fl-ewwel element se jintgħażel bħala dixxendent.

      Jekk trid tagħżel l-ankri kollha li huma imnisslin minn elementi ta 'l-ul, tikteb:

      ul a {text-decoration: xejn; }

      Issa, dawn l-istili se japplikaw għal kwalunkwe link li huwa dixxendent ta 'oġġett tal-lista. Tista 'wkoll tikteb dan is-selettur

      ul li a {text-decoration: xejn; }

      Dan huwa selettur dixxendenti li juża aktar minn żewġ seletturi tat-tip. F'dan il-każ, dan ikun japplika għar-rabtiet li huma ġewwa bħala lista-oġġett u wkoll ġewwa ta 'lista mhux immarkata.

      Użu ta 'Selectors ta' Klassi u Selectors ta 'l-ID

      L-assorturi li qed jitilqu minn ma għandhomx dejjem ikunu dixxendenti tat-tip. Per eżempju, jimmaġina li kellek żona tas-sit (bħal diviżjoni) b'attribut ID ta '"billboard". Inti tista 'twaqqaf selettur tad-dixxendent' il barra minn dik ID:

      #billboard ul {isfond-kulur: #ccc; }

      Dan ikun stil il-lista mhux organizzata li hija dixxendent ta 'element b'ID ta' "billboard". Tista 'tagħmel l-istess għall-valuri tal-klassi.

      div.billboard ul {isfond-kulur: #ccc; }

      Dan jassumi li d-diviżjoni għandha valur tal-klassi ta '"billboard". Is-CSS ta 'hawn fuq għandha tistudja l-element

      ta' kwalunkwe diviżjoni li għandha dan il-valur tal-klassi.

      Tista 'tikseb verament mgħobbi u verbose b'elektri dixxendenti. Per eżempju, jekk tuża Dreamweaver biex tikteb il- kodiċi HTML tiegħek, hemm issettjar meta żżid regoli CSS ġodda li joħolqu awtomatikament is-selettur ibbażat fuq it-tqegħid tal-cursor tiegħek fuq dik il-paġna. Dak li Dreamweaver jagħmel f'dan il-każ huwa l-ħolqien ta 'selettur dixxendenti selvaġġ u verbali. Dik l-ispeċifiċità ħafna mhijiex meħtieġa biex is- CSS tiegħek taħdem. Dak li trid tagħmel hu li ssib bilanċ bejn selettur dixxendenti li huwa speċifiku biżżejjed sabiex tista 'tħaffef l-elementi eżatti li teħtieġ (mingħajr dawk ta' grafika li ma tixtieqx taffettwa) mingħajr ma jkollok regoli CSS li jkollhom seletturi li huma wisq kbir.