CSS klassväljare

I CSS visas klassväljare med en punkt.

.center {text-align: center}

I det tidigare exemplet är alla HTML-element som har center-klassen centrerade.

I den föregående HTML-koden har både h1 och p-elementet center-klassen. Detta innebär att båda kommer att följa reglerna i ".center"-väljaren.

<h1 class="center">
Denna rubrik kommer att vara centrerad
</h1>
<p class="center">
Denna mening kommer också att vara centrerad.
</p>

Observera:Första tecknet i klassnamnet får inte vara ett siffra! Det fungerar inte i Mozilla eller Firefox.

Liksom id kan class användas som en abstrakt väljare:

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

I detta exempel kommer alla tabellceller inom den större element med klassnamnet fancy att visas med en grå bakgrund och orange text. (Det större elementet med namnet fancy kan vara en tabell eller en div)

Element kan också väljas baserat på deras klasser:

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

I det här exemplet kommer tabellcellen med klassnamnet fancy att vara med en grå bakgrund och orange färg.

<td class="fancy">

Du kan tilldela klassen fancy till vilken tabell-element som helst så många gånger som du vill. Dessa celler som är märkta med fancy kommer att vara med en grå bakgrund och orange färg. Dessa celler som inte har tilldelats en klass med namnet fancy kommer inte att påverkas av denna regel. Det är också värt att notera att paragrafer med klassen fancy kommer inte att vara med en grå bakgrund och orange färg, naturligtvis kommer också andra element som är märkta med fancy inte att påverkas av denna regel. Detta är på grund av sättet vi skriver denna regel, effekten är begränsad till tabellceller som är märkta med fancy (det vill säga att använda td-element för att välja fancy-klassen).

Relaterat innehåll

Om du behöver lära dig mer om klassväljare, läs CodeW3C.coms avancerade tutorial:Detaljerad förklaring av CSS klassväljare。