Hvordan stilstilpassede elementer med CSS-dummier

Når du utformer bestemte elementer med CSS, er det nyttig å visualisere HTML-koden som et slektstre med foreldre, barn og søsken. I følgende kodeeksempel starter treet med elementet html , som har to barn hode og kropp . -hodet har et barnelement kalt tittel . kroppen har h1 , ul og p elementer som barn. Endelig har elementet ul li elementer som barn, og elementet p har a elementer som barn.

- Figur 4-3: DOM

Parodi Tech Twitter-kontoer

Bored Elon Musk

• Vinod Coleslaw

• Hestebøker

• Parody Non-Tech Twitter-kontoer

Modern Seinfeld

Lord_Voldemort7

Slik vises koden i nettleseren

. Styling et slektstre av elementer.

Denne versjonen viser en skildring av koden ved hjelp av tremetaforen.

Parody Tech og Non-Tech Twitter-kontoer (nettleservisning).

Her vises hvert forhold en gang. For eksempel, i koden, er et

a element inne i hvert av tre li elementene, og dette bildet viser dette ul li a forhold en gang. Parody Tech og Non-Tech Twitter-konto (HTML-tre eller dokumentobjektmodellvisning).

Bored Elon Musk er en parodi av Elon Musk, grunnleggeren av PayPal, Tesla og SpaceX. Vinod Coleslaw er en parodi av Vinod Khosla, Sun Microsystems medstifter og venturekapitalist. Hestebøker er en spambot som ble et Internett fenomen.

HTML-treet kalles DOM- eller dokumentobjektmodellen.

Barnevalg

Parodi-ikke-Tech Twitter-kontoen ankeretiketter er umiddelbare barn i avsnittetikettene. Hvis du vil stile bare Parody Non-Tech Twitter-kontoer, kan du bruke

barnevalg, som velger de nærmeste barna til et spesifisert element. En barnevalg er opprettet ved først å oppgi foreldrevelgeren, deretter et større enn tegn (>), og til slutt barnevalgeren. I det følgende eksemplet er ankeretikettene som er umiddelbare barn i avsnittet koder valgt, og disse hyperkoblingene er utformet med rød skriftfarge og uten understreke. Parodi Tech Twitter-kontoer er ikke stylet fordi de er direkte barn i listemerket.

p> en {

farge: rød;

tekst-dekorasjon: ingen;

}

Barnevalg brukes til å utforme Parody Non-Tech Twitter-kontoer.

Hvis du bare bruker

a -velgeren her, vil alle linkene på siden bli stylet i stedet for bare et utvalg. Etterkommerevelger

Parodikk Tech Twitter-kontoen ankeretiketter er etterkommere, eller ligger innenfor, den uordnede listen. Hvis du vil stile bare Parody Tech Twitter kontoer, kan du bruke

etterkommerevelgeren, som ikke bare velger umiddelbare barn av et spesifisert element, men alle elementer som er nestet innenfor det angitte elementet. En etterkommerevelger er opprettet ved først å oppgi foreldrevelgeren, et mellomrom, og til slutt etterfølgervelgeren du vil målrette. I følgende eksempel er ankeretikettene som er etterkommere av den uordnede listen, valgt, og disse hyperkoblingene er utformet med en blå skriftfarge og krysses ut. Parody Non-Tech Twitter-kontoer er ikke stylet fordi de ikke er etterkommere av en uordnet liste.

ul a {

farge: blå;

tekst-dekorasjon: linje gjennom;

}

Barnevalg brukte stilen til Parody Tech Twitter-kontoer.

Interessert i styling bare den første ankermerket i en liste, som den moderne Seinfeld Twitter-kontoen, eller det andre listepunktet, som Vinod Coleslaw Twitter-kontoen? Gå til w3schools. com og les mer om

første barn og nth-barn selektorer.