Beth yw Dewisydd Syrthio CSS?

Mae strwythur dogfen HTML yn debyg i goeden deuluol. Yn eich teulu, mae gennych chi eich rhieni ac eraill a ddaeth o'ch blaen chi. Dyma'ch hynafiaid. Y plant a'r rhai sy'n dod ar eich ôl ar y goeden honno yw eich disgynyddion. Mae HTML yn gweithio mewn modd tebyg. Elfennau sydd y tu mewn i elfennau eraill yw eu disgynyddion. Er enghraifft, gan fod bron pob elfen HTML o fewn tagiau , byddent yn ddisgynnydd o'r elfennau hynny. Mae'r berthynas hon yn bwysig i'w ddeall wrth ddechrau gweithio gyda CSS ac mae angen iddo dargedu elfennau penodol i gymhwyso arddulliau gweledol.

Dewiswyr Disgynnol CSS

Mae detholydd CSS disgynyddion yn berthnasol i'r elfennau sydd o fewn elfen arall (neu wedi'i nodi'n gywir, yn elfen sy'n ddisgynyddion elfen arall). Er enghraifft, mae gan restr anghyffredin tag gyda tagiau fel disgynyddion. Gadewch i ni ddefnyddio'r HTML canlynol fel enghraifft:

• mae hwn yn ddolen

  Mae'r tagiau LI yn ddisgynyddion y tag UL. Mae'r tag A yn ddisgynnydd o'r tagiau LI (disgynwr plentyn) a thaflenni UL (deiliad y genethod). Os ydych chi'n meddwl am feddwl am hyn gan ddefnyddio'r enghraifft o goeden deuluol, y

  fyddai'r rhiant, y
  • fyddai plentyn yr elfen honno, a byddai'r yn blentyn i'r
  • ac wyres y y
    .

    Felly sut fyddech chi'n targedu elfennau penodol mewn tudalen we gan ddefnyddio'r detholyddion disgynyddion hyn? Yn gyntaf, mae'n rhaid ichi ddiffinio detholyddion disgynyddion trwy ddefnyddio dau ddetholiad math (neu fwy) o ddetholyddion wedi'u gwahanu gan fannau.

    li a {text-decoration: none; }

    Yn yr enghraifft honno, byddai'r arddulliau ond yn berthnasol i elfen gyswllt () sy'n disgynydd elfen eitem-rhestr (

    • ). Ni fyddai'r holl gysylltiadau eraill ar y dudalen nad ydynt yn ddisgynydd eitem restr yn cael yr arddull hon.

      Un peth pwysig i'w gofio yw nad oes ots faint o dagiau sydd ganddynt rhwng y tagiau y gallech eu defnyddio yn eich dewisydd disgynyddion. Os yw'r ail elfen wedi'i amgáu unrhyw le o fewn yr elfen gyntaf, fe'i dewisir fel disgynydd.

      Os ydych chi am ddewis pob angor sy'n ddisgynnol o elfennau ul, byddech yn ysgrifennu:

      ul a {text-decoration: none; }

      Nawr, bydd yr arddulliau hyn yn berthnasol i unrhyw ddolen sy'n ddisgynyddion eitem restr. Gallech hefyd ysgrifennu'r detholydd hwn

      ul li a {text-decoration: none; }

      Mae hwn yn ddetholydd disgyn sy'n defnyddio mwy na dau ddetholiad math. Yn yr achos hwn, byddai hyn yn berthnasol i gysylltiadau sydd y tu mewn fel eitemau rhestr a hefyd y tu mewn i restr anghywir.

      Defnyddio Dosbarthwyr Dosbarthwyr a Dewiswyr ID

      Nid oes raid i'r detholwyr yr ydych yn disgyn ohonynt fod yn ddisgynyddion. Er enghraifft, dychmygwch fod gennych ardal o'r safle (fel is-adran) gyda phriodol ID o "fwrdd bwrdd". Gallech sefydlu detholydd disgyn yn ôl yr ID hwnnw:

      #billboard ul {cefndir-lliw: #ccc; }

      Byddai hyn yn arddull y rhestr anghywir sydd yn ddisgynnydd o elfen gydag ID o "fwrdd bwrdd". Gallwch chi wneud yr un peth ar gyfer gwerthoedd dosbarth.

      div.billboard ul {cefndir-lliw: #ccc; }

      Mae hyn yn tybio bod gan yr adran werth dosbarth o "fwrdd bwrdd". Byddai'r CSS uchod yn arddull yr elfen

      y tu mewn i unrhyw adran sydd â gwerth y dosbarth hwn.

      Gallwch gael llaw trwm a verbose gyda detholyddion disgynyddion. Er enghraifft, os ydych chi'n defnyddio Dreamweaver i ysgrifennu eich cod HTML , mae yna leoliad pan fyddwch yn ychwanegu rheolau CSS newydd a fydd yn creu celf yn awtomatig yn seiliedig ar leoliad eich cyrchwr ar y dudalen honno. Mae'r hyn y mae Dreamweaver yn ei wneud yn yr achosion hyn yn creu dewiswr gwyllt a disgrifydd hir ddisgynyddion. Nid oes angen cymaint o fanylder i'ch CSS weithio. Yr hyn yr hoffech ei wneud yw dod o hyd i gydbwysedd rhwng detholydd disgyn sy'n ddigon penodol fel y gallwch chi drilio i lawr i'r union elfennau sydd eu hangen arnoch (heb arddull rhai nad ydych am eu heffeithio) heb gael rheolau CSS sydd â detholwyr sy'n rhy uchel mawr.