kelas pseudo CSS

Kelas Pseudo CSS

Kelas Pseudo CSS digunakan untuk menambah beberapa kesan khas pada pemilih.

Sintaks

Sintaks kelas pseudo:

selector:pseudo-class {property:value;}

class CSS juga boleh menggunakan pseudo-class:

selector.class:pseudo-class {property:value;}

anchor pseudo-class

Dalam penyemak imbas yang menyokong CSS, keadaan pautan yang berbeza boleh dipaparkan dengan cara yang berbeza. Dalam pautan css kami, kami telah belajar sedikit tentang

instance

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        a:link {color:#FF0000;}    /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已浏览过的链接 */
        a:hover {color:#FF00FF;}   /* 鼠标划过的链接 */
        a:active {color:#0000FF;}  /* 已选中的链接 */
    </style>
</head>

<body>
<p><b><a href="" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

Nota: a:hover diperlukan Selepas a:link dan a:visited, mereka perlu berada dalam susunan yang ketat untuk melihat kesannya.

Nota: a:aktif mesti datang selepas a:hover.

Nota: Nama kelas pseudo tidak sensitif huruf besar-besaran.

Jalankan program dan cuba

Kelas pseudo dan kelas CSS

Kelas pseudo boleh digunakan dengan kelas CSS ：

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html "> Sintaks CSS< /a>

Jika pautan dalam contoh di atas telah dilawati, ia akan muncul dalam warna merah.

Instance

Gunakan: fokus

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        input:focus
        {
            background-color:yellow;
        }
    </style>
</head>

<body>
<form action="" method="get">
    姓名: <input type="text" name="fname" /><br>
    留言: <input type="text" name="content" /><br>
    <input type="submit" value="Submit" />
</form>


</body>
</html>

Jalankan program dan cuba

Semua kelas/elemen pseudo CSS

:anak terakhir: jenis terakhir :not(selector):nth-child(n):nth-last-child(n):nth-last-of-type( n):nth-of-type(n):only-of-type :anak tunggal :pilihan:luar-julat:baca sahaja:baca-tulis:diperlukan :root:target:first-linep:first-line Memilih baris pertama setiap <p> elemen :first-childp:first-child pemilih sepadan dengan <]p> elemen :sebelum:selepas :lang(bahasabahagian seterusnya

fail baharu

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>php中文网(php.cn)</title>
 <style>
 input:focus
 {
 background-color:yellow;
 }
 </style>
</head>

<body>
<form action="" method="get">
 姓名: <input type="text" name="fname" /><br>
 留言: <input type="text" name="content" /><br>
 <input type="submit" value="Submit" />
</form>


</body>
</html>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh

tiada

Pemilih	Contoh	Contoh Penerangan
:ditanda	input : ditanda	Pilih semua elemen borang yang disemak
:dilumpuhkan	input:dilumpuhkan	Pilih semua elemen borang dilumpuhkan
:kosong	p:kosong	Pilih semua elemen p yang tiada unsur anak
:didayakan	input:enabled	Pilih semua elemen borang yang didayakan
:first-of-type	p:first-of-type	memilih elemen p anak pertama bagi setiap elemen induk iaitu elemen p
:dalam julat	input:dalam julat	Pilih nilai dalam julat elemen yang ditentukan
:input:input:invalid	Pilih semua elemen yang tidak sah
p:anak terakhir	Pilih elemen anak terakhir bagi semua elemen p
p:jenis terakhir	Memilih setiap elemen p yang merupakan elemen p terakhir bagi elemen induknya
:not(p)	Pilih semua elemen selain p
p:nth-child(2)	Pilih elemen anak kedua bagi semua elemen p
p:nth-last-child(2)	Pilih elemen anak kedua terakhir bagi semua elemen p
p:nth-last-of-type(2)	Pilih elemen anak kedua hingga terakhir p untuk semua elemen p
p:nth-of-type(2)	Pilih semua elemen p yang unsur anak kedua ialah p
p:only-of-type	Pilih semua elemen dengan hanya satu elemen anak p
p:anak tunggal	Pilih semua elemen p yang mempunyai hanya satu elemen anak
input:pilihan	Pilih atribut elemen tanpa "diperlukan"
input :luar-julat	Pilih atribut elemen dengan nilai di luar julat yang ditentukan
input:baca sahaja	Pilih elemen atribut dengan atribut baca sahaja
input:baca-tulis	Pilih elemen tanpa atribut baca sahaja Atribut elemen
input:diperlukan	Pilih atribut elemen yang ditentukan oleh atribut "diperlukan"
root	Pilih elemen akar dokumen
#news:target	Pilih elemen #berita aktif semasa (klik pada URL yang mengandungi nama sauh)
:sah	input:sah	Pilih atribut dengan semua nilai yang sah
:pautan	a :pautan	Pilih semua pautan yang belum dilawati
:dilawati	a:dilawati	Pilih semua pautan yang dilawati
:aktif	a:aktif	Pilih pautan aktif
:tuding	a:hover	Keadaan meletakkan tetikus pada pautan
:focus	input:focus	Pilih input elemen Selepas mempunyai fokus
:huruf pertama	p:huruf pertama	memilih huruf pertama setiap elemen <p>

		< iaitu anak pertama bagi mana-mana elemen 🎜>
p:sebelum	Sisipkan kandungan sebelum setiap elemen <p>
p:selepas	Sisipkan kandungan selepas setiap elemen <p>
)p: lang(it)	Pilih nilai permulaan untuk atribut lang bagi elemen <p> 🎜>