masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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(bahasaMeneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492361 permainan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved

PemilihContohContoh Penerangan
:ditandainput : ditandaPilih semua elemen borang yang disemak
:dilumpuhkaninput:dilumpuhkanPilih semua elemen borang dilumpuhkan
:kosongp:kosongPilih semua elemen p yang tiada unsur anak
:didayakan input:enabledPilih semua elemen borang yang didayakan
:first-of-typep:first-of-type memilih elemen p anak pertama bagi setiap elemen induk iaitu elemen p
:dalam julatinput:dalam julat Pilih nilai dalam julat elemen yang ditentukan
:input:input:invalidPilih semua elemen yang tidak sah
p:anak terakhirPilih elemen anak terakhir bagi semua elemen p
p:jenis terakhirMemilih 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-typePilih semua elemen dengan hanya satu elemen anak p
p:anak tunggalPilih semua elemen p yang mempunyai hanya satu elemen anak
input:pilihanPilih atribut elemen tanpa "diperlukan"
input :luar-julatPilih atribut elemen dengan nilai di luar julat yang ditentukan
input:baca sahajaPilih elemen atribut dengan atribut baca sahaja
input:baca-tulisPilih elemen tanpa atribut baca sahaja Atribut elemen
input:diperlukanPilih atribut elemen yang ditentukan oleh atribut "diperlukan"
rootPilih elemen akar dokumen
#news:target Pilih elemen #berita aktif semasa (klik pada URL yang mengandungi nama sauh)
:sahinput:sahPilih atribut dengan semua nilai yang sah
:pautana :pautanPilih semua pautan yang belum dilawati
:dilawatia:dilawatiPilih semua pautan yang dilawati
:aktifa:aktifPilih pautan aktif
:tuding a:hoverKeadaan meletakkan tetikus pada pautan
:focusinput:focusPilih input elemen Selepas mempunyai fokus
:huruf pertamap:huruf pertama memilih huruf pertama setiap elemen <p>
< iaitu anak pertama bagi mana-mana elemen 🎜>
p:sebelumSisipkan kandungan sebelum setiap elemen <p>
p:selepasSisipkan kandungan selepas setiap elemen <p>
)p: lang(it)Pilih nilai permulaan untuk atribut lang bagi elemen <p> 🎜>