Pseudo-kelas CSS

什么是伪类？

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

例如，它可以用于：

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

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

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

Contoh

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

Coba sendiri

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

伪类和 CSS 类

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

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

Contoh

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

Coba sendiri

悬停在 <div> 上

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

Contoh

div:hover {
  background-color: blue;
}

Coba sendiri

Tooltip tarik lepas sederhana

Tangkai mouse ke atas elemen <div> untuk menampilkan elemen <p> (efek seperti tool tip):

Tangkai ke atas saya untuk menampilkan elemen <p>.

Hoho, saya disini!

Contoh

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

Coba sendiri

CSS - :first-child pseudo-class

:first-child pseudo-class cocok dengan elemen yang ditentukan: elemen tersebut adalah anak pertama dari elemen lain.

cocokkan elemen <p> yang menjadi anak pertama

Dalam contoh di bawah ini, pemilih mencocokkan semua elemen <p> yang menjadi anak pertama dari setiap elemen lain:

Contoh

p:first-child {
  color: blue;
}

Coba sendiri

cocokkan semua elemen <i> yang menjadi anak pertama di dalam semua elemen <p>

Dalam contoh di bawah ini, pemilih mencocokkan semua elemen <i> yang menjadi anak pertama di dalam semua elemen <p>:

Contoh

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

Coba sendiri

cocokkan semua elemen <i> di dalam semua elemen <p> yang menjadi anak pertama

Dalam contoh di bawah ini, pemilih mencocokkan semua elemen <i> di dalam elemen <p> yang menjadi anak pertama dari elemen lain:

Contoh

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

Coba sendiri

CSS - :lang pseudo-class

:lang pseudo-class memungkinkan Anda menentukan aturan khusus untuk bahasa yang berbeda.

Dalam contoh di bawah ini,:lang Tentukan tanda kutip untuk elemen <q> yang memiliki atribut lang="en":

Contoh

<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>

Coba sendiri

Beberapa contoh lain

Tambahkan gaya berbeza untuk pautan
Contoh ini memperlihatkan bagaimana untuk menambahkan gaya lain ke pautan.
Gunakan :focus
Contoh ini memperlihatkan bagaimana untuk menggunakan pseudo-class :focus.

Semua CSS pseudo-class

选择器 例子 例子描述
:active a:active Pilih setiap pautan yang aktif.
:checked input:checked Pilih setiap elemen <input> yang dipilih.
:disabled input:disabled Pilih setiap elemen <input> yang dibenarkan.
:empty p:empty Pilih setiap elemen <p> yang tidak memiliki elemen anak.
:enabled input:enabled Pilih setiap elemen <input> yang diaktifkan.
:first-child p:first-child Pilih setiap elemen <p> yang menjadi anak pertama induknya.
:first-of-type p:first-of-type Pilih setiap elemen <p> yang menjadi elemen <p> pertama induknya.
:focus input:focus Pilih elemen <input> yang memiliki fokus.
:hover a:hover Pilih tautan yang dihover mouse padanya.
:in-range input:in-range Pilih elemen <input> yang memiliki nilai dalam rentang yang ditentukan.
:invalid input:invalid Pilih semua elemen <input> yang memiliki nilai yang tidak sah.
:lang(language) p:lang(it) Pilih setiap elemen <p> yang nilai atribut lang dimulai dengan "it".
:last-child p:last-child Pilih setiap elemen <p> yang menjadi anak terakhir induknya.
:last-of-type p:last-of-type Pilih setiap elemen <p> yang menjadi elemen <p> terakhir induknya.
:link a:link Pilih semua tautan yang belum diakses.
:not(selector) :not(p) Pilih elemen yang bukan <p>.
:nth-child(n) p:nth-child(2) Pilih setiap elemen <p> yang menjadi anak kedua induknya.
:nth-last-child(n) p:nth-last-child(2) Pilih setiap elemen <p> yang menjadi anak kedua induknya, menghitung dari elemen anak terakhir.
:nth-last-of-type(n) p:nth-last-of-type(2) Pilih setiap elemen <p> yang menjadi elemen <p> kedua induknya, menghitung dari elemen anak terakhir.
:nth-of-type(n) p:nth-of-type(2) Pilih setiap elemen <p> yang menjadi elemen <p> kedua induknya.
:only-of-type p:only-of-type Pilih setiap elemen <p> yang menjadi elemen tunggal <p> induknya.
:only-child p:only-child Pilih elemen <p> yang menjadi anak tunggal elemen induknya.
:optional input:optional 选择不带 "required" 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 <input> 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 <input> 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 <input> 元素。
:required input:required 选择指定了 "required" 属性的 <input> 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:visited a:visited 选择所有已访问的链接。

所有 CSS 伪元素

选择器 例子 例子描述
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。