Strukturen til et HTML-dokument ligner på et slektstre. I din familie har du foreldrene dine og andre som kom foran deg. Dette er dine forfedre. Barn og de som kommer etter deg på det treet, er dine etterkommere. HTML fungerer på lignende måte. Elementer som er inne i andre elementer er deres etterkommere. For eksempel, siden nesten hvert HTML-element er inne i
tags, de ville være en etterkommer av det elementer. Dette forholdet er viktig å forstå når du begynner å jobbe med CSS og må målrette mot bestemte elementer for å bruke visuelle stiler.CSS Etterkommere Selectors
En CSS-etterkommerevelger gjelder for elementene som er inne i et annet element (eller mer nøyaktig oppgitt, et element som er en etterkommer av et annet element). For eksempel har en uordnet liste en tag med tags som etterkommere. La oss bruke følgende HTML som et eksempel:
- dette er en lenke
De LI Tagger er etterkommere av UL stikkord. De EN tag er en etterkommer av både de LI (barn etterkommer) og UL (barnebarns etterkommere) tagger. Hvis du tenker på å tenke på dette ved hjelp av treet eksempelet,
- ville være forelder, den
- ville være det elementets barn, og det ville være barnet til
- og barnebarnet til
- .
- ). Alle andre lenker på siden som ikke er etterkommere av en liste, vil ikke få denne stilen.
En viktig ting å huske er at det ikke betyr noe hvor mange koder de er mellom merkene du kan bruke i din etterkommerevelger. Hvis det andre elementet er vedlagt hvor som helst innenfor det første elementet, blir det valgt som en etterkommer.
Hvis du vil velge alle ankre som stammer fra ul-elementer, vil du skrive:
ul en {tekst-dekorasjon: ingen; }
Nå vil disse stilene gjelde for enhver lenke som er en etterkommer av en liste element. Du kan også skrive denne velgeren
ul li a {text-decoration: none; }
Dette er en etterkommerevelger som bruker mer enn to typevalgere. I dette tilfellet vil dette gjelde for lenker som er innsiden av som listepost og også inne i en uordnet liste.
Bruke Class Selectors og ID Selectors
Selektorer som du stiger ned fra, må ikke alltid være etterkommere. For eksempel, tenk at du hadde et område på nettstedet (som en divisjon) med en ID-attributt for "billboard". Du kan sette opp en etterkommerevelger av den IDen:
#billboard ul {bakgrunnsfarge: #ccc; }
Dette ville utforme den uordnede listen som er en etterkommer av et element med en ID av "billboard". Du kan gjøre det samme for klassens verdier.
div.billboard ul {bakgrunnsfarge: #ccc; }
Dette forutsetter at divisjonen har en klassen verdi av "billboard". CSS ovenfor ville utforme
- element inne i en divisjon som har denne klassen verdi.
Du kan bli veldig tunghendt og ordentlig med etterkommere. Hvis du for eksempel bruker Dreamweaver til å skrive HTML-koden, er det en innstilling når du legger til nye CSS-regler som automatisk lagervelgeren basert på plasseringen av markøren din på den siden. Hva Dreamweaver gjør i disse tilfellene, er å skape en villig og langvarig etterkommerevelger. At mye spesifisitet er ikke nødvendig for at CSS skal fungere. Det du vil gjøre er å finne en balanse mellom en etterkommerevelger som er spesifikk nok, slik at du kan bore ned til de eksakte elementene du trenger (uten å utforme dem du ikke ønsker å påvirke) uten å ha CSS-regler som har selectors som er altfor store stor.
Så hvordan ville du målrette mot bestemte elementer i en nettside ved hjelp av disse etterkommere selektorer? Først må du definere etterkommere selektorer ved å bruke to (eller flere) type selektorer skilt av mellomrom.
li en {tekst-dekorasjon: ingen; }
I dette eksemplet vil stilene bare gjelde for et lenkeelement () som er en etterkommer av et element i elementet (
- ). Alle andre lenker på siden som ikke er etterkommere av en liste, vil ikke få denne stilen.
