Chagua cha CSS Descendant?

Mfumo wa hati ya HTML ni sawa na mti wa familia. Katika familia yako, una wazazi wako na wengine waliokuja kabla yako. Hawa ndio babu zenu. Watoto na wale wanaokuja baada yenu kwenye mti huo ni wazao wako. HTML inafanya kazi kwa namna hiyo. Mambo yaliyo ndani ya mambo mengine ni wazao wao. Kwa mfano, kwa karibu kila kipengele cha HTML ni ndani ya vitambulisho , wangekuwa kizazi cha vipengele . Uhusiano huu ni muhimu kuelewa wakati unapoanza kufanya kazi na CSS na unahitaji kulenga mambo maalum ya kutumia mitindo ya kuona.

CSS Descendant Selectors

Mchaguzi wa kizazi cha CSS hutumika kwa mambo yaliyo ndani ya kipengele kingine (au kwa usahihi zaidi, kipengele ambacho ni kizazi cha kipengele kingine). Kwa mfano, orodha isiyosaidiwa ina lebo na lebo kama watoto. Hebu tumia HTML ifuatayo kama mfano:

• hii ni kiungo

  Lebo za LI ni wazao wa tag ya UL. Kitambulisho cha A ni kizazi cha watoto wa LI (watoto wa uzao) na vitambulisho vya UL (wajukuu wa uzazi). Ikiwa unadhani kuhusu kufikiri juu ya hili kwa kutumia mfano wa familia,

  itakuwa mzazi,
  • itakuwa mtoto wa kipengele, na atakuwa mtoto wa
  • na mjukuu wa
    .

    Kwa hiyo ungependaje kutafuta vipengele maalum kwenye ukurasa wa wavuti ukitumia wateule wa uzazi? Kwanza, unapaswa kufafanua wachunguzi wa uzao kwa kutumia viumbe wawili (au zaidi) wa aina waliojitenga na nafasi.

    li {maandishi-maandishi: hapana; }

    Katika mfano huo, mitindo ingeweza kutumika tu kwa kipengele cha kiungo () ambacho ni kizazi cha kipengele cha kipengee (

    • ). Viungo vingine vyote kwenye ukurasa ambao si wazao wa kipengee cha orodha hakutapata mtindo huu.

      Jambo moja muhimu kukumbuka ni kwamba haijalishi ni alama ngapi ambazo ziko kati ya vitambulisho ambavyo unaweza kutumia katika mchezaji wako wa uzao. Ikiwa kipengele cha pili kinafungwa mahali popote ndani ya kipengele cha kwanza kitachaguliwa kama kizazi.

      Ikiwa unataka kuchagua nanga zote zilizotoka kwa vipengele vya ul, ungeandika hivi:

      ul {decoration-text: none; }

      Sasa, mitindo hii itatumika kwa kiungo chochote ambacho ni kizazi cha kipengee cha orodha. Unaweza pia kuandika chagua hii

      ul li {maandishi-maandishi: hakuna; }

      Huyu ni mchezaji wa uzao ambaye anatumia selector aina mbili. Katika kesi hii, hii itatumika kwa viungo ambavyo ni ndani ya orodha ya kipengee na pia ndani ya orodha isiyosaidiwa.

      Kutumia Selector za Hatari na Uchaguzi wa ID

      Wachaguaji kwamba unatoka kutoka hawana daima kuwa wazao wa aina. Kwa mfano, fikiria ulikuwa na eneo la tovuti (kama mgawanyiko) na sifa ya ID ya "bendera". Unaweza kuanzisha mteule wa uzao mbali na ID hiyo:

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

      Hii ingekuwa ni orodha ya orodha isiyojidhibitiwa ambayo ni kizazi cha kipengele kilicho na kitambulisho cha "bendera". Unaweza kufanya hivyo kwa maadili ya darasa.

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

      Hii inadhani kwamba mgawanyiko ina thamani ya darasa ya "bendera". CSS hapo juu ingekuwa mtindo

      ndani ya mgawanyo wowote unao thamani ya darasa hili.

      Unaweza kupata mzigo mzito na verbose na wachunguzi wa uzao. Kwa mfano, ikiwa unatumia Dreamweaver kuandika code yako ya HTML , kuna mipangilio unapoongeza sheria mpya za CSS ambazo zitajenga auto chagua kwa kutekeleza mshale wako kwenye ukurasa huo. Nini Dreamweaver anafanya katika matukio haya ni kujenga verbose wildly na mchezaji mzazi mrefu. Upeo huo sio muhimu kwa CSS yako kufanya kazi. Nini unataka kufanya ni kupata uwiano kati ya mchezaji wa uzao ambayo ni maalum kwa kutosha ili uweze kufuta vitu halisi unavyohitaji (bila ya kupiga maridadi ambayo hutaki kuathiri) bila kuwa na sheria za CSS ambazo zinawachagua zaidi kubwa.