Inhoudsopgave:
Video: Classes vs id's in HTML en CSS 2024
Bij het stylen van specifieke elementen met CSS, is het nuttig om de HTML-code te visualiseren als een stamboom met ouders, kinderen en broers en zussen. In het volgende codevoorbeeld begint de structuur met het element
html
, dat twee hoofd
hoofd
en
hoofdletter
heeft. Het
hoofd
heeft een onderliggende element genaamd
titel
. Het
lichaam
heeft
h1
,
ul
en
p
elementen als kinderen. Ten slotte heeft het
ul
element
li
elementen als kinderen en heeft het
p
element
a
elementen als kinderen.
Afbeelding 4-3: DOM
Bored Elon Musk
Vinod Coleslaw
horse ebooks
Parodie niet-technische Twitter-accounts
Modern Seinfeld
Lord_Voldemort7
Zo verschijnt de code in de browser .
Deze versie toont een afbeelding van de code met behulp van de boommetafoor.
Hier wordt elke relatie eenmaal getoond. In de code bevindt een element
a
zich bijvoorbeeld binnen elk van de drie
li
elementen en deze afbeelding toont deze
ul
li
a
relatie eenmaal.
Verveeld Elon Musk is een parodie op Elon Musk, de oprichter van PayPal, Tesla en SpaceX. Vinod Coleslaw is een parodie op Vinod Khosla, medeoprichter en venture capitalist van Sun Microsystems. Horse ebooks is een spambot die een internetfenomeen is geworden.
De HTML-structuur wordt het DOM- of documentobjectmodel genoemd.
Kinderelector
De anker-tags van de parodie niet-Tech Twitter-account zijn directe onderliggende elementen van de alineatags. Als je alleen de Parody Non-Tech Twitter-accounts wilt stylen, dan kun je de kindenselector gebruiken die de directe kinderen van een bepaald element selecteert. Een kindselector wordt gemaakt door eerst de bovenliggende selector op te lijsten, vervolgens een groter dan-teken (>) en ten slotte de onderliggende selector.
In het volgende voorbeeld zijn de ankertags geselecteerd die directe onderliggende elementen van de alineatags zijn en die hyperlinks zijn gestileerd met een rode letterkleur en zonder onderstreping. De Twitter-accounts van Parody Tech zijn niet opgemaakt omdat ze directe kinderen van de lijstitem zijn.
p> a {
kleur: rood;
tekstdecoratie: geen;
}
Als u hier alleen de
a
selector gebruikt, worden alle links op de pagina gestileerd in plaats van alleen een selectie.
Nakomelingenkiezer
De anchor-tags van de Twitter-account van de Parody Tech-Twitter zijn afstammelingen of bevinden zich in de ongeordende lijst. Als u alleen de Parody Tech-Twitter-accounts wilt opmaken, kunt u de onderliggende selector gebruiken, die niet alleen directe onderliggende elementen van een opgegeven element selecteert, maar alle elementen die in het opgegeven element zijn genest. Een onderliggende selector wordt gemaakt door eerst de bovenliggende selector op te geven, een spatie en als laatste de nakomende selector die u wilt targeten.
In het volgende voorbeeld zijn de ankertags geselecteerd die afstammelingen zijn van de ongeordende lijst en die hyperlinks zijn gestileerd met een blauwe letterkleur en zijn doorgehaald. De Parody Non-Tech Twitter-accounts zijn niet gestileerd omdat ze geen afstammelingen zijn van een ongeordende lijst.
ul a {
kleur: blauw;
tekstdecoratie: doorvoer;
}
Wilt u alleen de eerste ankertag in een lijst opmaken, zoals het moderne Seinfeld-Twitter-account of het tweede lijstitem, zoals het Vinod Coleslaw Twitter-account? Ga naar w3schools. com en lees meer over de
eerste kind
en
nde kind
selectoren.
