CSS .luokka Valitsin

Määrittely ja käyttö

CSS .luokka Valitsimet käytetään valitsemaan elementit, joilla on tietty luokka ominaisuuksien arvon omaavat elementit, kirjoita elementin nimi, sitten piste (

Valitaksesi kaikki tietyn.) merkki, seuraten luokka ominaisuuksien arvo.

elementti.luokka Valitsimet käytetään valitsemaan elementit, joilla on tietty luokka ominaisuuksien arvon omaavat elementit.

valita vain tietyn luokka tyyppisestä elementistä, kirjoita elementin nimi, sitten piste (.) merkki, seuraten luokka ominaisuuksien arvoihin (katso alla oleva esimerkki 2)。

Vinkki:HTML-elementit voivat viitata useisiin luokka(Katso alla oleva esimerkki 3)。

Esimerkki

Esimerkki 1

Valitse ja aseta kaikkien class="intro" -elementtien tyylit:

.intro {
  background-color: keltainen;
}

Kokeile itse!

Esimerkki 2

Valitse ja aseta kaikkien class="intro" -luokan <p>-elementtien tyylit:

p.intro {
  background-color: keltainen;
}

Kokeile itse!

Esimerkki 3

.luokka Valitsimen eri käyttötapaukset:

/* Valitse kaikki class="center" -elementit */
.center {
  text-align: center;
}
/* Valitse kaikki class="large" -luokan <p>-elementit */
p.large {
  font-size: 200%;
}
/* Valitse kaikki class-listassa sisältävät "fancy" ja "beige" -luokan <p>-elementit */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px vahva vihreä;
}
/* Valitse class="ex1" -luokan kaikki <p>-elementin sisällä olevat class="ex2" -elementit */
p.ex1 .ex2 {
  background-color: keltainen;
}

Kokeile itse!

CSS-grammatiikka

.luokka {
  css-deklaratiot;
}

CSS-grammatiikka

elementti.luokka {
  css-deklaratiot;
}

Tekninen yksityiskohta

Versio: CSS1

Selaimen tuki

Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki

Liittyvät sivut

CSS-opas:CSS luokka-valitsin

CSS-opas:CSS luokka-valitsin selitys