Yintoni uSecteur Descendant Selection?

Isakhiwo somqulu we-HTML sifana nomthi weentsapho. Kwintsapho yakho, unabazali bakho nabanye abaza phambi kwakho. Aba ngabayihlo. Abantwana kunye nalabo abaza emva kwakho emthini yintsimi yakho. I-HTML isebenza ngendlela efanayo. Izinto ezingaphakathi kwezinye izinto ziyinzala yabo. Umzekelo, ekubeni phantse yonke into ye-HTML ingaphakathi kwe tags, babeza kuba yinzala yelo elements. Olu lwalamano lubalulekile ukuqonda xa uqala ukusebenza neCSS kwaye kufuneka ujolise ekujoliseni izinto ezithile ukuze usebenzise izitayela ezibonakalayo.

CSS Descendant Seleers

Umkhethi wezala we-CSS usebenza kwizinto eziphakathi kwelinye iqela (okanye ngokuchazwe ngokuchanekileyo, into ephuma kwinxalenye yenye into). Ngokomzekelo, uluhlu olungenakulinganiswa luphethe ithegi kunye namathegi njengenzalo. Masisebenzise le HTML elandelayo njengomzekelo:

• oku kukhonkco

  Iimpawu ze-LI ziyinzala ye-UL tag. Ithegi yenzalo ye-LI (inzala yomntwana) kunye ne-UL (inzala yezala). Ukuba ucinga ngokucinga ngale ndlela usebenzisa umzekelo womthi womndeni, i

  yayiza kuba ngumzali, i
  • iya kuba ngumntwana wento, kwaye uza kuba ngumntwana we
  • kunye nomzukulu
    .

    Ngoko uza kujolisa njani izinto ezithile kwiphepha lewebhu usebenzisa abakhethi bezala? Okokuqala, kufuneka uchaze abakhethi bezabelo ngokusebenzisa ezimbini (okanye ngaphezulu) ezikhethiweyo ezikhethiweyo ezikhethiweyo.

    li {isicatshulwa-umbhalo: akukho; }

    Kulo mzekelo, izitawu ziya kusebenza kuphela kwiqumrhu lekhonkco () eliyinzala yelungu lezinto (

    • ). Zonke ezinye izixhumanisi kwiphepha elingenayo inzala yoluhlu lwento aluyi kufumana le ndlela.

      Into ebalulekileyo yokukhumbuza kukuba ayikhathazeki ukuba mangaphi amathegi aphakathi kwamathegi onokuyisebenzisa kwisikhethi sakho somzuzwana. Ukuba iqela lesibini lifakwe naphi na kwindawo eyokuqala iya kukhethwa njengenzalo.

      Ukuba ufuna ukukhetha zonke ii-anchos ezisezantsi kwizinto, ungabhala:

      ul {{text-decoration: none; }

      Ngoku, le mizobo iya kusebenza nakowuphi na umnxibelelwano onyana weloluhlu. Ungabhala kwakhona eli khetho

      ul li {{text-decoration: none; }

      Lo ngumkhethi wezala osebenzisa abakhethiweyo beefayile ezimbini. Kule meko, oku kuya kusebenza kwizikhonkco eziphakathi kwoluhlu-nento kunye nangaphakathi lwoluhlu olungenakuqondwa.

      Ukusebenzisa iSelectri yeeKlasi kunye neeSetter

      Abakhethi abahlahlayo akudingeki ukuba uthayiphe inzala. Ngokomzekelo, cinga ukuba unendawo yomhlaba (njengokwahlula) kunye nombonakalo we-ID we "bhodibhodi". Ungamisela umkhethi wezityalo kwi-ID:

      #billboard ul {umbala osemva: #ccc; }

      Oku kuya kufaka uluhlu olungenakucinganiswa oluvela kwinzala yento ene-ID ye "billboard". Unokwenza okufanayo kumgangatho weklasi.

      div.billboard ul {umgca wesiqalo: #ccc; }

      Oku kuthatha ukuba ukwahlula kunenani leklasi ye "bhodibhodi". I-CSS apha ngasentla iya kufaka isalathiso

      ngaphakathi kwiphina iqela eli lixabiso le klasi.

      Unokufumana unzima kakhulu kwaye unikezele ngeefowuni. Umzekelo, ukuba usebenzisa iDreamweaver ukuba ubhale ikhowudi yakho ye- HTML , kukho imimiselo xa ubongeza imithetho emitsha yeCSS eya kuyenza ngokuzenzekelayo umkhethi ngokusekelwe kwesikhokhelo sakho kwiphepha. Yintoni eyenziwa yiDreamweaver kule meko yenza i-verbose yasendle kunye nekhethi elide lokuzala. Ingcaciso enjalo ayimfuneko ukuba iCSS yakho isebenze. Oko ufuna ukukwenza kukufumana ukulinganisela phakathi komnyuli wezalamane okhethekileyo ukwenzela ukuba unganqamle kwizinto ezifunekayo (ngaphandle kobugcisa onqwenela ukuphazamisa) ngaphandle kokuba neCSS imigaqo ekhethileyo ekhethiweyo. enkulu.