CSS klasse selektorer

I CSS vises klassevælgeren med en punktum:

.center {text-align: center}

I det ovenstående eksempel er alle HTML-elementer med center-klassen centreret.

I nedenstående HTML-kode har både h1- og p-elementer center-klassen. Dette betyder, at begge vil følge reglerne i vælgeren ".center".

<h1 class="center">
Dette overskrift vil blive centreret
</h1>
<p class="center">
Denne afsnit vil også blive centreret.
</p>

Bemærk:Første tegn i klassenavnet må ikke være et tal! Det virker ikke i Mozilla eller Firefox.

Som med id kan class også bruges som en afledt selektor:

.fancy td {
	color: #f60;
	background: #666;
	}

I dette eksemplet vil alle tabellenheder inden for det større element med klassenavn fancy blive vist med en grå baggrund og orange tekst. (Det større element med navnet fancy kan være en tabel eller en div)

Elementer kan også vælges baseret på deres klasse:

td.fancy {
	color: #f60;
	background: #666;
	}

I det ovenstående eksempel vil tabel cellerne med klasse fancy være med en grå baggrund og orange farve.

<td class="fancy">

Du kan tildele klassen fancy til en hvilken som helst tabel element, så mange gange som du vil. De celler, der er mærket med fancy, vil være med en grå baggrund og orange farve. De celler, der ikke er tildelt en klasse med navnet fancy, vil ikke blive påvirket af denne regel. Derudover vil paragrafer med klasse fancy heller ikke være med en grå baggrund og orange farve, ligesom andre elementer, der er mærket med fancy, vil ikke blive påvirket af denne regel. Dette skyldes måden, vi har skrevet denne regel på, og effekten er begrænset til celler, der er mærket med fancy (dvs. ved hjælp af td-elementer til at vælge fancy klassen).

Relateret indhold

Hvis du har brug for at lære mere om klasse selektorer, så læs CodeW3C.com's avancerede undervisning:CSS klasse selektorer detaljeret。