Kursrekommendation:klass CSS .

Väljare

Definition och användning .klass egenskapsvärde. klass egenskapsvärde. CSS

egenskapsvärde, skriv ett punkt (.) tecken, följt av klass För att välja alla typer av element med en specifik

element.klass egenskapsvärde. klass egenskapsvärde. Väljare används för att välja element med en specifik

för att endast välja element med en specifik klass en typ av element, skriv elementnamnet, följt av en punkt (.) tecken, följt av klass egenskapsvärden (se exempel 2 nedan).

Tips:HTML-element kan också hänvisa till flera klass(Se exempel 3 nedan).

Exempel

Exempel 1

Välj och sätt in stilar för alla element med class="intro":

.intro {
  background-color: gul;
}

Prova själv

Exempel 2

Välj och sätt in stilar för alla <p> element med class="intro":

p.intro {
  background-color: gul;
}

Prova själv

Exempel 3

.klass Användning av olika väljare:

/* Välj alla element med class="center" */
.center {
  text-align: center;
}
/* Välj alla <p> element med class="large" */
p.large {
  font-size: 200%;
}
/* Välj alla <p> element som innehåller class="fancy" och "beige" */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px solid grönt;
}
/* Välj alla <p> element med class="ex1" inom alla element med class="ex2" */
p.ex1 .ex2 {
  background-color: gul;
}

Prova själv

CSS-syntax

.klass {
  css-uttryck;
}

CSS-syntax

element.klass {
  css-uttryck;
}

Tekniska detaljer

Version: CSS1

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Stödjer Stödjer Stödjer Stödjer Stödjer

Relaterade sidor

CSS-lärord:CSS klassväljare

CSS-lärord:CSS klassväljare detaljer