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 viduje
Žymos, jie būtų šio modelio palikuonys elementai. Š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
The Li žymos yra palikuonys iš UL žyma The A žyma yra palikuonis abu as Li (vaiko palikuonis) ir UL (anūkės palikuonys). Jei galvojate apie tai galvoti naudodami šeimos medžio pavyzdį,
- būtų tėvas,
- Būtų šio elemento vaikas, ir jis būtų vaikas
- ir vaiko aukle
- .
- ) 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ę. Ankstesnis CSS stiliaus
- bet kurio skyriaus, turinčio šios klasės vertę, elementas.
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.
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; }
Šiame pavyzdyje stiliai būtų taikomi tik nuorodų elementui (), kuris yra sąrašo elemento elemento palikuonis (
- ) Visi kiti puslapio nuorodos, kurie nėra sąrašo elemento palikuonys, šio stiliaus nepasiekė.
