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>
<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
| 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> |
| p:first-line | Memilih baris pertama | setiap <p> elemen |
| p:first-child | pemilih sepadan dengan <]p> elemen | < 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> 🎜> |
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~ 