CSS :active pseudoklass

Definition och användning

CSS :active pseudoklasser används för att välja och ställa in stilar för element som användaren aktiverar.

:active pseudoklasser används mest för <a> och <button> element. När användaren klickar på en länk aktiveras den; det är samma för knappar.

Tips:Använd :link Ställ in stilar för länkar till obesökta sidor, använd :visited Ställ in stilar för länkar till besökta sidor, använd :hover Ställ in stilar för länkar vid muspekare

Observera:I CSS-definitioner:active Måste placeras :hover！（Om det finns）kan det endast träda i kraft!

Exempel

Exempel 1

Välj och ställ in stilar för aktiverade länkar：

a:active {
  background-color: yellow;
}

Prova själv

Exempel 2

Välj och ställ in stilar för <button> vid klick：

button:active {
  background-color: pink;
}

Prova själv

Exempel 3

Välj och ställ in stilar för <p>、<h1> och <a>-element vid klick：

p:active, h1:active, a:active {
  background-color: yellow;
}

Prova själv

Exempel 4

Välj och ställ in stilar för obesökta, besökta, musepekar och aktiverade länkar：

/* Obesökta länkar */
a:link {
  color: green;
}
/* Besökta länkar */
a:visited {
  color: green;
}
/* Länkar med muspekare */
a:hover {
  color: red;
}
/* Aktiverade länkar */
a:active {
  color: yellow;
}

Prova själv

Exempel 5

Ställ in olika stilar för länkar：

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Prova själv

CSS-syntax

:active {
  css deklarationer;
}

Tekniska detaljer

Webbläsarstöd

Talen i tabellen anger den första webbläsaren som helt stöder denna pseudoklass.

relaterade sidor

教程：CSS-länkar

教程：CSS-knappar

教程：CSS pseudoklasser