Detaljerad förklaring av CSS klass väljare

Klassseletor tillåter att stila på ett sätt som är oberoende av dokumentelementen.

CSS klass väljare

Klassseletor tillåter att stila på ett sätt som är oberoende av dokumentelementen.

Denna seletor kan användas ensam eller kombineras med andra element.

Tips:Endast efter att dokumentet har markerats på ett lämpligt sätt kan dessa seletorer användas, så användning av dessa två seletorer kräver ofta att man gör några överväganden och planering.

Det mest använda sättet att tillämpa stil utan att ta hänsyn till specifika designade element är att använda klassseletor.

Ändra HTML-koden

Innan klassseletorn används måste den specifika dokumentmarkeringen ändras för att klassseletorn ska fungera korrekt.

För att koppla styleskikten för klassseletorn till elementen måste class anges till ett lämpligt värde. Se HTML-koden nedan:

<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>

I o den ovanstående kod har båda elementens class angivits som important: den första titeln (h1-elementet) och den andra stycket (p-elementet).

Syntax

Därefter använder vi följande syntax för att tillämpa stilar på dessa kategoriserade element, dvs. en punkt framför klassnamnet, följt av jokervalvaren:

*.important {color:red;}

Om du bara vill välja element med samma klassnamn, kan du ignorera jokervalvaren i klassvalvaren, vilket inte har några negativa effekter:

.important {color:red;}

Prova själv

Kombinera elementvalvare

Klassvalvare kan kombineras med elementvalvare.

Till exempel, du kanske vill att endast paragrafer visas som röd text:

p.important {color:red;}

Valvaren kommer nu att matcha alla p-element med class-attribut som innehåller important, men matchar inte andra typer av element, oavsett om de har detta class-attribut. Valvaren p.important tolkas som: "Alla paragrafer med class-attributet important". Eftersom h1-elementet inte är en paragraf, matchar denna valvare inte och h1-elementet blir inte rött text.

Om du verkligen vill ange en annan stil för h1-elementet, kan du använda valvaren h1.important:

p.important {color:red;}
h1.important {color:blue;}

Prova själv

CSS flerklassvalvare

I föregående avsnitt behandlade vi fall där class-värdet innehåller ett ord. I HTML kan ett class-värde innehålla en ordlista, separerade av blanksteg. Till exempel, om du vill markera ett specifikt element som både viktigt (important) och varning (warning), kan du skriva:

<p class="important warning">
This paragraph is a very important warning.
</p>

Ordordets ordning spelar ingen roll, det kan också skrivas warning important.

Vi antar att alla element med klassen important är fet och alla element med klassen warning är kursiva, samt att alla element som innehåller både important och warning har en silverfärgad bakgrund. Det kan skrivas som:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Prova själv

Genom att länka samman två klassvalvare kan endast väljaInnehåller dessa klassnamn samtidigtelement (klassnamnens ordning spelar ingen roll).

Om en flerklassväljare innehåller ett klassnamn som inte finns i klassnamnslistan, kommer matchningen att misslyckas. Se reglerna nedan:

.important.urgent {background:silver;}

Förväntat, denna väljare kommer endast att matcha p-element som har ord important och urgent i class-attributet. Därför kommer ett p-element som bara har ord important och warning i class-attributet inte att matcha. Men det kan matcha följande element:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

Prova själv

Viktiga punkter:I versioner av Internet Explorer innan IE7 kan olika plattformars Internet Explorer inte behandla flerklassväljare korrekt.