Yini i-CSS Descendant Seleter?

Ukwakhiwa komqulu we-HTML kufana nomuthi womndeni. Emndenini wakho, unabazali bakho nabanye abaza ngaphambi kwakho. Laba yikhokho benu. Izingane nalabo abaza emva kwakho emthini yizinzalo zakho. I-HTML isebenza ngendlela efanayo. Izinto ezingaphakathi kwezinye izakhi ziyinzalo yabo. Isibonelo, njengoba cishe zonke izici ze-HTML zingaphakathi kwamamaki , ziyoba yinzalo yalowo izakhi. Lobuhlobo kubalulekile ukuqonda uma uqala ukusebenza ne-CSS futhi udinga ukukhomba izakhi ezithile ukuze usebenzise izitayela ezibukwayo.

CSS Descendant Selectors

Umkhethi wezintambo ze-CSS usebenza ezakhiweni ezingaphakathi kwesinye isici (noma okushiwo ngokunembile, isici esiyinzalo yesinye isici). Isibonelo, uhlu olungaqondakali lunomaki ngamathegi njengenzalo. Masisebenzise HTML elandelayo njengesibonelo:

• lokhu yisixhumanisi

  Amathegi we-LI ayinzalo yomthamo we-UL. Umaki we-A ungumzukulu we-LI (inzalo yezingane) kanye namathegi we-UL (abazukulu bomzukulu). Uma ucabanga ngokucabanga ngalokhu usebenzisa isibonelo somuthi womndeni,

  kungaba ngumzali, i-
  • izoba yingane yomntwana, futhi abe ngumntwana we
  • nomzukulu i-
    .

    Ngakho ungabhekisela kanjani izakhi ezithile ezisekhasini lewebhu usebenzisa lezi zikhethi zokuzala? Okokuqala, kufanele uchaze abahluleli bezinzalo ngokusebenzisa izinketho ezimbili (noma ngaphezulu) ezihlukaniswe izikhala.

    li {umbhalo-umhlobiso: akekho; }}

    Kuleso sibonelo, izitayela zizosebenza kuphela kusixhumanisi sokuxhumanisa () esingumzukulu wento yezinto (

    • ). Zonke ezinye izixhumanisi ekhasini elingeyona inzalo yohlu lwento ngeke lithole lesi sitayela.

      Into ebalulekile okumele uyikhumbule ukuthi akukhathaleki ukuthi mangaki amathegi aphakathi kwamathegi ongase uwasebenzise kumakhethi wakho wezintambo. Uma isici sesibili sihlanganiswe noma yikuphi ngaphakathi kwesici sokuqala sizokhethwa njengenzalo.

      Uma ufuna ukukhetha zonke izinsimbi ezivela ezakhiweni ze-ul, ungabhala:

      ul {umbhalo-umhlobiso: akekho; }}

      Manje, lezi zitayela zizosebenza kunoma yisiphi isixhumanisi esiyinzalo yohlu lwento. Ungabhala futhi lesi sikhethi

      ul li {umbhalo-umhlobiso: akekho; }}

      Lo ngumkhethi wezintambo osebenzisa okungaphezu kokubili izinhlobo zezikhethi. Kulesi simo, lokhu kuzosebenza ezixhumanisini ezingaphakathi njengalolu hlu-nalokho futhi ngaphakathi kwohlu olungavunyelwe.

      Ukusebenzisa i-Class Selectors ne-ID Selectors

      Abakhethi abaphuma kuwo akudingeki ukuba bahlabele inzalo njalo. Isibonelo, cabanga ukuthi unendawo yesayithi (njengokuhlukana) ngenhloso ye-ID ye "billboard". Ungasetha isinqunjwana sezintambo kule ID:

      #billboard ul {umbala wangemuva: #ccc; }}

      Lokhu kuzodlulisa uhlu olungenakuqondiswa oluyisisekelo senxenye ene-ID ye "billboard". Ungenza okufanayo kumanani wekilasi.

      div.billboard ul {umbala wesizinda: #ccc; }}

      Lokhu kuthatha ukuthi ukwahlukana kunenani le-class "ye-billboard". I-CSS ngenhla ingasetha isici

      ngaphakathi ngaphakathi kwanoma yikuphi ukwahlukana okunale klasi.

      Ungathola imithwalo esindayo kakhulu kanye ne-verbose nezingane ezikhethiwe. Isibonelo, uma usebenzisa i-Dreamweaver ukubhala ikhodi yakho ye- HTML , kunesilungiselelo uma ufaka imithetho emisha ye-CSS ezokwenza ngokuzenzakalelayo ukukhetha ukhethwa ngokusethwa kwekhalenda lakho kuleli khasi. Lokho uDreamweaver akwenzayo kulezi zenzakalo kudala i-verbose engokwemvelo kanye nomkhethi omdala wezinzalo. Ukucacisa okuningi akudingekile ukuba i- CSS yakho isebenze. Lokho ofuna ukukwenza ukuthola ukuthola ibhalansi phakathi kwesakhethi somzuzwana okwanele ukuze ukwazi ukugxila ezithombeni ezidingayo (ngaphandle kokwenza izinto ongafisi ukukuthinta) ngaphandle kokuba ne-CSS imithetho enezikhethi ezingaphezulu ezinkulu.