Alamin kung Ano ang CSS Selector Selector

Ang istruktura ng isang HTML na dokumento ay katulad ng isang puno ng pamilya. Sa iyong pamilya, mayroon kang iyong mga magulang at iba pa na dumating bago ka. Ito ang iyong mga ninuno. Ang mga bata at ang mga sumusunod sa iyo sa punong iyon ay ang iyong mga inapo. Gumagana ang HTML sa parehong paraan. Ang mga elemento na nasa loob ng iba pang mga sangkap ay ang kanilang mga inapo. Halimbawa, dahil halos lahat ng elemento ng HTML ay nasa loob ng tag, magiging isang inapo iyon mga elemento. Ang relasyon na ito ay mahalaga upang maunawaan kapag nagsimula kang nagtatrabaho sa CSS at kailangang mag-target ng mga tukoy na elemento upang ilapat ang mga visual na estilo.

CSS Descendant Selectors

Ang isang seleksyon ng tagapili ng CSS ay nalalapat sa mga elemento na nasa loob ng isa pang elemento (o mas tumpak na nakasaad, isang elemento na isang inapo ng isa pang elemento). Halimbawa, ang isang hindi nakaayos na listahan ay may tag na may mga tag bilang mga inapo. Gamitin natin ang sumusunod na HTML bilang halimbawa:

• ito ay isang link

Ang LI Ang mga tag ay mga inapo ng UL tag. Ang A tag ay isang supling ng kapwa ang LI (child descendant) at UL (mga inapo ng apo) na mga tag. Kung iniisip mo ang tungkol sa pag-iisip tungkol dito gamit ang halimbawa ng puno ng pamilya, ang

ang magiging magulang, ang
• ay ang bata ng elementong iyon, at ang magiging anak ng
• at ang apo ng
  .

  Kaya paano mo i-target ang mga tukoy na elemento sa isang web page gamit ang mga inapilang mga inapo na ito? Una, kailangan mong tukuyin ang mga tagapili ng kaapu-apuhan sa pamamagitan ng paggamit ng dalawang (o higit pa) mga tagapili ng uri na pinaghihiwalay ng mga puwang.

  li a {text-decoration: none; }

  Sa halimbawang iyon, ang mga estilo ay nalalapat lamang sa isang elemento ng link () na isang inapo ng elemento ng listahan-item (

  • ). Ang lahat ng iba pang mga link sa pahina na hindi isang inapo ng isang listahan ng item ay hindi makakuha ng estilo na ito.

    Ang isang mahalagang bagay na dapat tandaan ay hindi mahalaga kung gaano karaming mga tag ang nasa pagitan nila ng mga tag na maaaring ginagamit mo sa iyong supling na inapo. Kung ang ikalawang elemento ay nakapaloob sa kahit saan sa loob ng unang elemento ito ay mapipili bilang isang inapo.

    Kung gusto mong piliin ang lahat ng mga anchor na nagmula sa ul elemento, nais mong isulat:

    ul a {text-decoration: none; }

    Ngayon, ang mga estilo na ito ay nalalapat sa anumang link na isang inapo ng isang listahan ng item. Maaari mo ring isulat ang tagapili na ito

    ul li a {text-decoration: none; }

    Ito ay isang tagapili ng inapo na gumagamit ng higit sa dalawang uri ng tagapili. Sa kasong ito, mailalapat ito sa mga link na nasa loob ng listahan-item at sa loob ng isang hindi nakaayos na listahan.

    Paggamit ng mga Class Selectors at ID Selectors

    Ang mga tagapili na bumababa mula sa hindi kailangang palaging uri ng mga inapo. Halimbawa, isipin na mayroon kang isang lugar ng site (tulad ng isang dibisyon) na may ID na katangian ng "billboard". Maaari mong i-set up ang isang descendant selector off ng ID na iyon:

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

    Ito ang estilo ng hindi nakaayos na listahan na isang inapo ng isang elemento na may ID ng "billboard". Maaari mong gawin ang parehong para sa mga halaga ng klase.

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

    Ipinapalagay nito na ang dibisyon ay may halaga ng klase ng "billboard". Ang CSS sa itaas ay istilo ng

    elemento sa loob ng anumang dibisyon na may ganitong uri ng halaga.

    Maaari kang makakuha ng talagang mabigat na kamay at masigla sa mga tagapili ng inapo. Halimbawa, kung gagamitin mo ang Dreamweaver upang isulat ang iyong HTML code, mayroong isang setting kapag nagdagdag ka ng mga bagong patakaran sa CSS na awtomatikong gagawa ng tagapili batay sa paglalagay ng iyong cursor sa pahinang iyon. Anong ginagawa ng Dreamweaver sa mga pagkakataong ito ay lumikha ng isang wildly masigla at napakahabang tagapamagitan na tagapili. Hindi gaanong kailangan ang pagtitiyak sa iyong CSS upang gumana. Kung ano ang gusto mong gawin ay maghanap ng isang balanse sa pagitan ng isang supling na inapo na tiyak na sapat upang maaari mong mag-drill down sa eksaktong mga elemento na kailangan mo (walang mga estilo na hindi mo nais na makaapekto) nang walang pagkakaroon ng mga panuntunan sa CSS na may mga tagapili na labis malaki.