Naon Dupi hiji pamilihan CSS turunan?

Struktur hiji dokumen HTML mangrupakeun sarupa hiji tangkal kulawarga. Dina kulawarga, anjeun geus kolot anjeun sarta batur anu datang saméméh anjeun. Ieu anjeun karuhun. Barudak saha jalma anu datangna sanggeus anjeun dina tangkal anu anjeun turunan. HTML jalan dina fashion sarupa. Elemen anu jero ngeunaan elemen séjén anu turunan maranéhanana. Contona, saprak ampir unggal unsur HTML mangrupakeun jero tag, maranéhna bakal janten turunan anu elemen. Hubungan ieu penting pikeun ngarti lamun anjeun ngawitan gawé bareng CSS jeung kudu nepi ka tujuan elemen husus panawaran gaya visual.

CSS turunan Selectors

A pamilihan CSS turunan manglaku ka elemen anu jero unsur sejen (atawa leuwih nyatakeun akurat, unsur éta téh turunan unsur sejen). Contona, hiji daptar unordered boga tag kalawan tag salaku turunan. Hayu urang nganggo HTML handap sakumaha conto:

• ieu tumbu

  Tag Li anu turunan tag UL. Tag A mangrupakeun turunan boh Li (turunan anak) jeung UL (Buyut turunan) tag. Lamun mikir ngeunaan pikir ngeunaan ieu ngagunakeun conto tangkal kulawarga, anu

  bakal jadi indungna, anu
  • bakal janten anak anu unsur urang, sarta bakal anak sahiji
  • jeung Buyut tina éta
    .

    Jadi kumaha anjeun bakal sasaran elemen husus dina hiji kaca web ngagunakeun ieu selectors turunan? Kahiji, anjeun kudu nangtukeun selectors turunan ku ngagunakeun dua (atawa leuwih) ngetik selectors dipisahkeun ku spasi.

    li nu {téks-hiasan: taya; }

    Dina conto éta, gaya wungkul bakal dilarapkeun ka unsur link () nu mangrupakeun turunan unsur daftar-item (

    • ). Sadaya Tumbu lianna dina kaca anu henteu turunan hiji item daptar moal bakal meunang gaya ieu.

      Hiji hal penting pikeun nginget éta henteu masalah sabaraha tag aranjeunna di antara tag Anjeun bisa jadi maké di pamilihan turunan anjeun. Mun unsur kadua enclosed mana dina unsur kahiji eta bakal dipilih salaku turunan hiji.

      Upami anjeun hoyong pikeun milih kabeh anchors nu diturunkeun ti elemen ul, anjeun bakal nulis:

      ul a {téks-hiasan: taya; }

      Ayeuna, gaya ieu baris dilarapkeun ka link mana wae nu mangrupakeun turunan hiji item daptar. Anjeun oge bisa nulis pamilihan ieu

      ul li a {téks-hiasan: taya; }

      Ieu pamilihan turunan anu ngagunakeun leuwih ti dua jenis selectors. Dina hal ieu, ieu bakal dilarapkeun ka Tumbu anu jero ngeunaan salaku daptar-item sarta ogé jero ngeunaan hiji daptar unordered.

      Ngagunakeun kelas Selectors sarta ID Selectors

      The selectors nu nuju nurun tina teu kudu salawasna jadi tipe turunanana. Contona, ngabayangkeun anjeun kagungan wewengkon situs (kawas division a) kalawan ID hiji atribut tina "billboard". Anjeun bisa nyetél hiji pamilihan turunan kaluar tina ID yén:

      #billboard ul {tukang-warna: #ccc; }

      Ieu bakal gaya daptar unordered nu mangrupakeun turunan unsur kalawan ID tina "billboard". Anjeun tiasa lakukeun deui kanggo nilai kelas.

      div.billboard ul {tukang-warna: #ccc; }

      Ieu nganggap yen division ngabogaan nilai kelas "billboard". CSS di luhur bakal gaya

      unsur jero ngeunaan sagala division nu boga nilai kelas ieu.

      Anjeun tiasa meunang sih beurat-dibikeun tur verbose kalawan selectors turunan. Contona, upami anjeun make Dreamweaver nulis anjeun kode HTML , aya setting a mun anjeun tambahkeun aturan CSS anyar nu bakal otomatis-jieun sejen dumasar kana panempatan of kursor Anjeun dina kaca eta. Naon Dreamweaver manten di instansi ieu nyieun hiji pamilihan turunan wildly verbose na lengthy. Yén loba spésifisitas teu dipikabutuh pikeun anjeun CSS ka jalan. Naon rék ngalakukeun anu manggihan kasaimbangan antara hiji pamilihan turunan anu cukup husus ku kituna anjeun bisa bor handap ka elemen pasti nu peryogi (tanpa styling leuwih anjeun teu keukeuh mangaruhan) tanpa ngabogaan aturan CSS nu gaduh selectors anu overly badag.