Detaljerad förklaring av CSS id-väljare

ID-väljare tillåter att stila på ett sätt som är oberoende av dokumentelementen.

CSS ID-väljare

På vissa sätt liknar ID-väljare klassväljare, men det finns också viktiga skillnader.

Syntaks

Först har ID-väljaren en #-tecken - också kallad brädtecken eller brunnstecken.

Se följande regel:

*#intro {font-weight:bold;}

Liksom klassväljare kan wildcards väljas bort i ID-väljare. Föregående exempel kan också skrivas som:

#intro {font-weight:bold;}

Effekten av denna väljare kommer att vara densamma.

Den andra skillnaden är att ID-väljaren inte refererar till värdet för class-attributet, utan utan tvekan till värdet för id-attributet.

Här är ett exempel på en verklig ID-väljare:

<p id="intro">Detta är en introduktionsparagraf.</p>

Prova själv

Klassväljare eller ID-väljare?

I kapitlet om klassväljare har vi tidigare förklarat att du kan tilldela klasser till flera element. I föregående kapitel tillämpades klassnamnet important på p- och h1-element, och det kan också tillämpas på fler element.

Skillnad 1: Kan endast användas en gång i dokumentet

I motsats till klasser används ID-väljare endast en gång i ett HTML-dokument och endast en gång.

Skillnad 2: Kan inte använda ID-ordlista

I motsats till klassväljare kan inte ID-väljare användas tillsammans, eftersom ID-attributet inte tillåter en lista av ord separerade med blanksteg.

Skillnad 3: ID kan innehålla mer innebörd

Liksom klasser kan ID:er väljas oberoende av element. Ibland vet du att ett specifikt ID-värde kommer att förekomma i dokumentet, men inte vilket element det kommer att visas på, så du vill deklarera en självständig ID-väljare. Till exempel kan du veta att det kommer att finnas ett element med ID-värdet mostImportant i ett givet dokument. Du vet inte om detta viktigaste är en paragraf, en fras, en punktlista eller en sektionstitel. Du vet bara att varje dokument kommer att ha denna viktiga innehåll, som kan finnas i vilket element som helst och kan förekomma endast en gång. I detta fall kan du skriva följande regel:

#mostImportant {färg:red; bakgrund:gelé;}

Denna regel kommer att matcha följande element (dessa element kan inte förekomma samtidigt i samma dokument, eftersom de har samma ID-värde):

<h1 id="mostImportant">Detta är viktigt!
<em id="mostImportant">Detta är viktigt!
<ul id="mostImportant">Detta är viktigt!</ul>

Prova själv:

Stora och små bokstäver

Observera att klassväljare och ID-väljare kan vara大小写敏感。Det beror på dokumentets språk.HTML och XHTML definierar klass- och ID-värden som大小写敏感，så klass- och ID-värdena måste matcha de motsvarande värdena i dokumentet.

Därför kommer elementen inte att bli fet för följande CSS och HTML:

#intro {font-weight:bold;}
<p id="Intro">Detta är en introduktionsparagraf.</p>

Eftersom bokstaven i är olika storlekar, kommer väljaren inte att matcha elementen ovan.