pseudo-class :active trong CSS

Định nghĩa và cách sử dụng

CSS :active ảo lớp được sử dụng để chọn và đặt phong cách cho phần tử mà người dùng đang kích hoạt.

:active ảo lớp thường được sử dụng <a> và <button> element. Khi người dùng nhấn liên kết, liên kết sẽ được kích hoạt; nút cũng vậy.

Lưu ý:Sử dụng :link Đặt phong cách cho liên kết trang chưa được truy cập, sử dụng :visited Đặt phong cách cho liên kết trang đã được truy cập, sử dụng :hover Đặt phong cách cho liên kết khi di chuột qua.

Lưu ý:Trong định nghĩa CSS,:active phải được đặt trong :hoverphải có (nếu có) mới có thể hoạt động!

Ví dụ

Ví dụ 1

Chọn và đặt phong cách cho liên kết được kích hoạt:

a:active {
  màu nền: vàng;
}

Thử ngay

Ví dụ 2

Chọn và đặt phong cách cho phần tử <button> khi được nhấn:

button:active {
  màu nền: hồng;
}

Thử ngay

Ví dụ 3

Chọn và đặt phong cách cho các phần tử <p>, <h1> và <a> khi được nhấn:

p:active, h1:active, a:active {
  màu nền: vàng;
}

Thử ngay

Ví dụ 4

Chọn và đặt phong cách cho liên kết chưa được truy cập, đã được truy cập, di chuột qua và được kích hoạt:

/* Liên kết chưa được truy cập */
a:link {
  màu: xanh lá cây;
}
/* Liên kết đã được truy cập */
a:visited {
  màu: xanh lá cây;
}
/* Liên kết được di chuột qua */
a:hover {
  màu: đỏ;
}
/* Liên kết được kích hoạt */
a:active {
  màu: vàng;
}

Thử ngay

Ví dụ 5

Đặt phong cách khác nhau cho liên kết:

a.ex1:hover, a.ex1:active {
  màu: đỏ;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Thử ngay

Ngữ pháp CSS

:active {
  công thức css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn ảo lớp này.

Trang liên quan

Hướng dẫn:CSS liên kết

Hướng dẫn:CSS nút

Hướng dẫn:CSS ảo lớp