De struktuer fan in HTML dokumint is te fergelykjen mei in stambeam. Yn jo famylje hawwe jo jo âlders en oaren dy't foardat jo kamen. Dit binne jo foarâlden. Bern en dyjingen dy't jo nei dy beam komme, binne jo neiteam. HTML wurket op deselde mode. Eleminten dy't binnen oare eleminten binne binne neikommend. Bygelyks, om't elke HTML-elemint binnen binne fan
tags, wienen se in neisieten fan 'e eleminten. Dizze relaasje is wichtich om te begripen as jo begjinne mei CSS te wurkjen en spesifike eleminten te soargjen foar fisuele stilen.CSS-ôfhannele seleksjes
In seleksektor fan CSS jildt foar de eleminten dy't binnen in oar elemint binne (of mear genôch, in elemint dat in neigeslacht fan in elemint is). Bygelyks in unlisted list hat in tag mei tags as neikommend. Lit de folgjende HTML as foarbyld brûke:
- dit is in keppeling li> ul>
De LI-tags binne neisieten fan it UL-tag. De A-tag is in neisiet fan ' e LI (berneboek) en UL (pakesizzer) tags. As jo tinke oan 't tinke oer dit brûken fan' e famyljebeam-foarbyld, soe de
- de âlder wêze, it
- soe it elemint fan 't bern wêze, en it soe it bern fan
- wêze en it pakesik fan de
- .
- ) is. Alle oare keppelings op 'e side dy't gjin neisieten fan in list item wiene dizze styl net krije.
Wêrom soest jo spesifike eleminten op in webside brûke dy gebrûk meitsje fan dizze descendant selector? Earst moatte jo berikte seleksjes definieare troch twa (of mear) type seleksjes te skieden troch skieden.
li a {tekst-dekoraasje: gjin; }Yn dat foarbyld soe de stilen allinich tapasse foar in linkelemint () dat in neigeslacht fan in list item item (
Ien wichtichste ding om te ferjitten is dat it net sprekt hoefolle tags binne se tusken de tags dy't jo brûke kinne yn jo seleksje selector. As it twadde elemint oeral binnen it earste elemint bewarre wurdt, wurdt it selektearre as neigeamers.
As jo alle ankers selektearje dy't fan ul-eleminten ôfstean, sille jo skriuwe:
ul a {tekst-dekoraasje: gjin; }No sille dizze stilen oanfreegje foar elke keppeling dy't in neisiet fan in list item is. Jo kinne ek dizze selector skriuwe
ul li a {tekst-dekoraasje: gjin; }Dit is in descendant selector dy't mear as twa type seleksjes brûkt. Yn dat gefal soe dit tapast wurde foar keppelings dy't binnen it list item binne en ek binnen in unlisted list.
Mei help fan klasse-seleksjes en ID-seleksjes
De seleksjer dy't jo ôfsteane fan moatte net altyd type neikommend wurde. Soargje dan foarbylden dat jo in gebiet fan 'e side hawwe (lykas in divyzje) mei in ID-attribút fan "billboard". Jo kinne in seleksje selector opstelle fan dizze ID:
#billboard ul {eftergrûnkleur: #ccc; }Dit soe de unorderde list stylje dy't is in neisiet fan in elemint mei in ID fan "billboard". Jo kinne itselde dwaan foar klasde wearden.
div.billboard ul {background-color: #ccc; }Dit jout oan dat de divyzje in klaswearde hat fan "billboard". De CSS hjirboppe soe it
- elemint yndiele fan elke ôfdieling dy't dizze klasse wearde hat.
Jo kinne echt swier hân krije en verbose mei neifolgjende seleksjes. As jo bygelyks Dreamweaver brûke om jo HTML-koade te skriuwen, is der in ynstelling om jo nije CSS-regels te tafoegje dy't de selector automatysk meitsje sil basearre op it pleatsen fan jo rinnerke op dizze side. Wat Dreamweaver docht yn dit eksimplaar is in wiere ferbean en langere nammers selektear. Dat folle spesifyk is net nedich foar jo CSS om te wurkjen. Wat jo dwaan wolle, is in balâns te finen tusken in descendant selector dy't spesifyk genôch is om jo te finen nei de krekte eleminten dy't jo nedich hawwe (sûnder styling dy't jo net ynfloedje wolle) sûnder CSS regels te hawwen dy't seleksjes hawwe grut.
- wêze en it pakesik fan de
- soe it elemint fan 't bern wêze, en it soe it bern fan