CSS pseudo-class

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
请将鼠标悬停在我上面

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

Ví dụ

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

Thử ngay lập tức

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

Ví dụ

a.highlight:hover {
  color: #ff0000;
}

Thử ngay lập tức

悬停在 <div> 上

在 <div> 元素上使用 :hover 伪类的实例：

Ví dụ

div:hover {
  background-color: blue;
}

Thử ngay lập tức

Hiệu ứng công cụ chỉ dẫn đơn giản

Dựng chuột lên phần tử <div> để hiển thị phần tử <p> (giống như hiệu ứng công cụ chỉ dẫn):

Dựng chuột lên trên tôi để hiển thị phần tử <p>.

Hè hè, tôi đang ở đây!

Ví dụ

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Thử ngay lập tức

CSS - pseudo-class :first-child

:first-child Pseudo-class khớp với phần tử được chỉ định: phần tử đó là con đầu tiên của một phần tử khác.

Khớp với phần tử <p> đầu tiên

Trong ví dụ sau, bộ lọc này khớp với bất kỳ phần tử <p> nào là con đầu tiên của bất kỳ phần tử nào:

Ví dụ

p:first-child {
  color: blue;
}

Thử ngay lập tức

Khớp với phần tử <i> đầu tiên trong tất cả các phần tử <p>

Trong ví dụ sau, bộ lọc này khớp với phần tử <i> đầu tiên trong tất cả các phần tử <p>:

Ví dụ

p i:first-child {
  color: blue;
}

Thử ngay lập tức

Khớp với tất cả các phần tử <i> trong phần tử <p> đầu tiên

Trong ví dụ sau, bộ lọc này khớp với tất cả các phần tử <i> trong phần tử <p> là con đầu tiên của một phần tử khác:

Ví dụ

p:first-child i {
  color: blue;
}

Thử ngay lập tức

CSS - pseudo-class :lang

:lang pseudo-class cho phép bạn định nghĩa các quy tắc đặc biệt cho các ngôn ngữ khác nhau.

Trong ví dụ sau,:lang Định nghĩa dấu ngoặc kép cho phần tử <q> có thuộc tính lang="en":

Ví dụ

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Thử ngay lập tức

Các ví dụ khác

Thêm các樣式 khác cho liên kết
Ví dụ này trình bày cách thêm các樣式 khác vào liên kết.
Sử dụng :focus
Ví dụ này trình bày cách sử dụng pseudo-class :focus.

Tất cả các pseudo-class CSS.

Chọn phần tử Ví dụ Mô tả ví dụ
:active a:active Chọn liên kết hoạt động.
:checked input:checked Chọn mỗi phần tử <input> được chọn.
:disabled input:disabled Chọn mỗi phần tử <input> bị vô hiệu hóa.
:empty p:empty Chọn mỗi phần tử <p> không có phần tử con.
:enabled input:enabled Chọn mỗi thẻ <input> được kích hoạt.
:first-child p:first-child Chọn mỗi thẻ <p> là thẻ con đầu tiên của thẻ cha.
:first-of-type p:first-of-type Chọn mỗi thẻ <p> là thẻ cha đầu tiên.
:focus input:focus Chọn các thẻ <input> được tập trung.
:hover a:hover Chọn các liên kết được chuột悬停.
:in-range input:in-range Chọn các thẻ <input> có giá trị trong khoảng giá trị đã chỉ định.
:invalid input:invalid Chọn tất cả các thẻ <input> có giá trị không hợp lệ.
:lang(language) p:lang(it) Chọn mỗi thẻ <p> có giá trị thuộc tính lang bắt đầu bằng "it".
:last-child p:last-child Chọn mỗi thẻ <p> là thẻ con cuối cùng của thẻ cha.
:last-of-type p:last-of-type Chọn mỗi thẻ <p> là thẻ cha cuối cùng.
:link a:link Chọn tất cả các liên kết chưa được truy cập.
:not(selector) :not(p) Chọn mỗi thẻ không phải là thẻ <p>.
:nth-child(n) p:nth-child(2) Chọn mỗi thẻ <p> là thẻ con thứ hai của thẻ cha.
:nth-last-child(n) p:nth-last-child(2) Chọn mỗi thẻ <p> là thẻ con thứ hai của thẻ cha, tính từ cuối cùng.
:nth-last-of-type(n) p:nth-last-of-type(2) Chọn mỗi thẻ <p> là thẻ con thứ hai của thẻ cha, tính từ cuối cùng.
:nth-of-type(n) p:nth-of-type(2) Chọn mỗi thẻ <p> là thẻ con thứ hai của thẻ cha.
:only-of-type p:only-of-type Chọn mỗi thẻ <p> là thẻ cha duy nhất của nó.
:only-child p:only-child Chọn thẻ <p> là con duy nhất của thẻ cha.
:optional input:optional Chọn phần tử <input> không có thuộc tính "required"
:out-of-range input:out-of-range Chọn phần tử <input> có giá trị nằm ngoài phạm vi quy định
:read-only input:read-only Chọn phần tử <input> đã chỉ định thuộc tính "readonly"
:read-write input:read-write Chọn phần tử <input> không có thuộc tính "readonly"
:required input:required Chọn phần tử <input> đã chỉ định thuộc tính "required"
:root root Chọn phần tử gốc của phần tử
:target #news:target Chọn phần tử #news hiện tại đang hoạt động (nhấp vào URL chứa tên thẻ锚 này)
:valid input:valid Chọn tất cả các phần tử <input> có giá trị hợp lệ
:visited a:visited Chọn tất cả các liên kết đã truy cập

Tất cả các pseudo-element CSS

Chọn phần tử Ví dụ Mô tả ví dụ
::after p::after Chèn nội dung sau mỗi <p>元素
::before p::before Chèn nội dung trước mỗi <p>元素
::first-letter p::first-letter Chọn chữ cái đầu tiên của mỗi <p>元素
::first-line p::first-line Chọn dòng đầu tiên của mỗi <p>元素
::selection p::selection Chọn phần tử phần tử mà người dùng đã chọn