Kas yra CSS palikuonių parinkiklis?

HTML dokumento struktūra yra panaši į šeimos medį. Jūsų šeimoje turite savo tėvus ir kitus, kurie atėjo prieš jus. Tai yra tavo protėviai. Vaikams ir tiems, kurie ateina po tavęs tame medyje, yra tavo palikuonys. HTML veikia panašiai. Elementai, kurie yra kitų elementų viduje, yra jų palikuonys. Pavyzdžiui, kadangi beveik kiekvienas HTML elementas yra žymių viduje, jie būtų šio elemento palikuonis. Šis santykis yra svarbu suprasti, kai pradedate dirbti su CSS, ir reikia taikyti konkrečius elementus, kad galėtumėte taikyti vizualinius stilius.

CSS palikuonių parinkėjai

CSS palikuonių parinkiklis taikomas elementams, esantiems kito elemento viduje (arba tiksliau nurodyta, elementas, kuris yra kito elemento palikuonis). Pavyzdžiui, netvarkingam sąrašui yra žyma su žymėmis kaip palikuonys. Pavyzdžiui, naudokime tokį HTML:

• tai yra nuoroda

  LI žymos yra UL žymos palikuonys. Žymė A yra tiek LI (vaiko palikuonys), tiek UL (anūkės palikuonių) ženklais palikuonis. Jei galvoji apie tai galvoti naudodami šeimos medžio pavyzdį,

  būtų tėvas,
  • būtų to elemento vaikas, o būtų
  • ir vaiko anūkas
    .

    Taigi, kaip jūs taikysite konkrečius elementus tinklalapyje naudodami šiuos palikuonių parinkiklius? Pirma, turite nustatyti palikuonių selektorius, naudodami du (ar daugiau) tipo selektorius, atskirtus tarpus.

    li a {text-decoration: none; }

    Tame pavyzdyje stiliai būtų taikomi tik nuorodos elementui (), kuris yra sąrašo elemento (

    • ) palikuonis. Visi kiti puslapio nuorodos, kurie nėra sąrašo elemento palikuonys, šio stiliaus nepasiekė.

      Vienas svarbus dalykas, kurį reikia prisiminti, yra tas, kad nesvarbu, kiek žymų jie yra tarp žymių, kurias galite naudoti savo palikuonio parinkiklyje. Jei antrasis elementas yra uždaras bet kurioje pirmojo elemento vietoje, jis bus pasirinktas kaip palikuonis.

      Jei norite pasirinkti visus inkarus, kurie kilę iš ul elementų, rašykite:

      ul a {text-decoration: none; }

      Dabar šie stiliai bus taikomi bet kuriai nuorodai, kurios yra sąrašo elemento palikuonis. Taip pat galite parašyti šį parinkiklį

      ul li a {text-decoration: none; }

      Tai palikuonių parinkiklis, kuris naudoja daugiau nei dviejų tipų selektorių. Šiuo atveju tai būtų taikoma nuorodoms, kurios yra sąrašo elemento viduje, taip pat netinkamo sąrašo viduje.

      Naudojant klasių selektorių ir ID rinkiklius

      Nuo mažėjančių selektorių ne visada turi būti palikuonių tipo. Pvz., Įsivaizduokite, kad turite svetainės sritį (pvz., Padalinį) su "skelbimų lentos" ID atributu. Galėtumėte nustatyti šio ID tapatintą šaltinį:

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

      Tai sukurs nepastovų sąrašą, kuris yra elemento palikuonis su "skelbimų lentos" ID. Jūs galite padaryti tą patį ir klasių vertei.

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

      Tai daro prielaidą, kad padalinys turi klasikinę "skelbimų lentos" vertę. Aukščiau pateiktas CSS sukurtų elementą

      bet kurio skyriaus, turinčio šios klasės vertę, viduje.

      Jūs galite gauti tikrai sunkus ir verbose su palikuonių selektoriais. Pavyzdžiui, jei naudojate "Dreamweaver", norėdami parašyti savo HTML kodą , yra nustatymas, kai pridedate naujas CSS taisykles, kurios automatiškai sukurs parinkiklį, atsižvelgiant į jūsų žymeklio vietą toje svetainėje. Ką Dreamweaver atlieka šiais atvejais, sukuria pernelyg daugybišką ir ilgą palikuonių parinkiklį. Kad jūsų CSS dirbti, toks specifiškumas nėra būtinas. Ką jūs norite padaryti, tai rasti pusiausvyrą tarp palikuonių parinkiklio, kuris yra pakankamai specifiškas, kad galėtumėte grįžti prie tikslių jums reikalingų elementų (be stiliaus tų, kurių nenorite paveikti) be CSS taisyklių, kurių rinkmenos yra pernelyg didelis.