Klasseselektor
Klasseselektor
Klasseselektor er en gratis leksjon i HTML for Kids på CoddyKit. Dette er leksjon 1 av 1. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML for Kids, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML for Kids inneholder totalt 1 leksjoner.
Hvorfor bruke klasseselektorer
Hei,
Vi har kommet til klasseselektorer, som er et av de viktigste temaene i CSS.
Vi kjenner klasseselektoren fordi vi har brukt den ofte frem til nå.
I denne leksjonen skal vi både styrke kunnskapen vår og lære om fordelene den har sammenlignet med andre selektorer.
Syntaks for klasseselektoren
La oss begynne.
Vi bruker punktumselektoren (.) til å definere en klasseselektor. Nedenfor ser du en klasseselektor med navnet my-class, der font-size-stilen er satt til 10px.
.my-class {
font-size: 10px;
}
Vi kan også definere mer enn én stil for en klasseselektor.
.my-class {
font-size: 10px;
}
Flere selektorer
Vi kan tilordne mer enn én klasse til det samme elementet.
I eksempelet nedenfor er det definert to klasseselektorer med navnene el1 og el2.
To eller flere klasser kan legges til class-attributtet til elementet som er opprettet med p-taggen, med mellomrom mellom dem.
I forhåndsvisningen kan du se at stilene fra de to klassene gjenspeiles i elementet samtidig.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Så hvorfor bør vi velge klasseselektoren fremfor tagg- og ID-selektoren?
Så hvorfor bør vi velge klasseselektoren fremfor tagg- og ID-selektoren?
Når vi bruker taggse gelektoren, kan det føre til uønskede resultater fordi den påvirker alle elementene som er opprettet med denne taggen. Derfor bruker vi vanligvis disse taggene når alle elementene skal ha en felles egenskap.
Hvis vi for eksempel ønsker at hvert elements skrifttype skal være «Lato», lager vi en definisjon som følger.
a{
font-family: Lato,sans-serif
}Så hvorfor bør vi velge klasseselektoren fremfor tagg- og ID-selektoren? 2
Vi kan lage en elementspesifikk definisjon med ID-selektoren.
Siden alle stildefinisjonene våre bare gjelder for ett element, måtte vi imidlertid skrive koden på nytt for et annet element som vi ønsket skulle vise de samme egenskapene.
Det kan bare finnes ett element i et HTML-dokument med samme ID.
CSS-spesifisitet
La oss nå lære om begrepet CSS-spesifisitet.
La oss lage et problem på nytt for å forstå emnet bedre. Vi lærer dette begrepet mens vi løser problemet.
CSS-spesifisitet 2
I eksempelet nedenfor
er det laget en stildefinisjon for p-taggen.
Det er laget en stildefinisjon med en klasseselektor med navnet .first.
Begge selektorene valgte det samme elementet i HTML-dokumentet vårt.
Begge selektorene har definert stiler som endrer den samme fargeegenskapen. I dette tilfellet oppstår det en konflikt.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSS-spesifisitet 3
Når vi ser på eksempelet, kan vi ut fra det vi har lært tidligere, tenke at fargen blir rød.
Det er fordi kaskadebegrepet forteller oss at den siste plasseringen i koderekkefølgen vinner.
Det finnes imidlertid en liten nyanse. Hvis de har samme spesifisitet, vinner koden som kommer sist.
Dette er en vurdering som viser hvor viktig selektorens spesifisitet er for det aktuelle elementet eller de aktuelle elementene.
Uavhengig av plasseringen i koden vil selektoren med høy spesifisitet bli prioritert av nettleseren.
Advarsel
Klasseselektoren er en mer spesifikk definisjon enn elementselektoren. Derfor har den høyere spesifisitet.
Selektorspesifisitet
Det er faktisk svært enkelt å finne ut hvilken selektor som er mest spesifikk.
Siden det bare kan være én ID tilordnet et element, og det bare kan finnes én slik ID på nettsiden, forventer vi at den er selektoren med høyest prioritet.
Klasseselektorer kan derimot vurderes som mer spesifikke enn taggselektorer fordi de velger en mer spesifikk gruppe enn taggen.
Vi skal se at ID-selektoren vinner i eksempelet nedenfor, der det samme elementet velges med tre forskjellige selektorer.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Verktøy for beregning av spesifisitet
Du finner den nettbaserte spesifisitetskalkulatoren på denne lenken.
Når spesifisitet er viktig
Må jeg bruke disse beregningene hele tiden?
Selvfølgelig ikke. Det oppstår ingen konflikter når vi skriver koden i henhold til standardene.
Du trenger altså ikke å gjøre matematiske beregninger hele tiden, men når det oppstår et problem, kan du trenge denne informasjonen for å løse det.
Gratulerer
Gratulerer. 🥳🥳🥳
Du har fullført leksjonen klasseselektorer og CSS-specificity.
I neste del skal vi lære om selektortypene.
Du kan klikke for å fortsette til neste del.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 16
- Leksjoner
- 35
Ofte stilte spørsmål
Er leksjonen «Klasseselektor» gratis?
Ja – hele teksten i «Klasseselektor» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av HTML for Kids-kurset, kan du oppgradere til CoddyKit PRO. Kurset i HTML for Kids inneholder totalt 1 leksjoner.
Hva lærer jeg i «Klasseselektor»?
Klasseselektor Du øver på HTML for Kids med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML for Kids?
Ingen tidligere erfaring er nødvendig. HTML for Kids på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 1.
Hvor lang tid tar leksjonen «Klasseselektor»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML for Kids-leksjonen?
Ja. Alle HTML for Kids-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.