Kelas pseudo CSS -- Kelas Pseudo
Kelas pseudo CSS ialah sebahagian daripada pemilih CSS
Nama kelas pseudo sensitif huruf besar dan kecil Kepekaan bergantung pada bahasa daripada dokumen. Dalam HTML Dokumen ini tidak sensitif huruf besar-besaran, tetapi dokumen XML sensitif huruf besar-kecil
kelas pseudo dalam bahasa Inggeris ialah Kelas Pseudo
Kaitan antara gaya dalam CSS. dan elemen dalam dokumen HTML biasanya berdasarkan elemen dalam lokasi dokumen, pendekatan ini memenuhi kebanyakan keperluan. Walau bagaimanapun, disebabkan oleh pengehadan struktur dokumen HTML, beberapa kesan tidak dapat dicapai, seperti peristiwa yang dicetuskan oleh tindakan pengguna tertentu Berikut ialah beberapa contoh:
Apabila pengguna menggerakkan tetikus ke atas elemen HTML<🎜. >
Meninggalkan elemen HTML
Mengklik pada elemen HTML
pseudo-class boleh digunakan untuk perubahan dalam status dokumen, peristiwa dinamik, dsb., seperti klik tetikus pengguna pada elemen dan pautan yang tidak dilawati
Kelas pseudo mengelaskan elemen melalui tiga cirinya: nama, atribut atau kandungan. Pada dasarnya, ia adalah ciri yang tidak boleh diperolehi dalam dokumen HTML
CSS :link pseudo-class
:link -- CSS :link pseudo-class, sesuai untuk pautan yang belum dilawati oleh pengguna
Sintaks: :link
Versi CSS: CSS1
Penerangan:
sesuai untuk pautan yang belum dilawati oleh pengguna
Terminal pengguna (seperti penyemak imbas) biasanya memaparkan pautan yang belum dilawati dan pautan yang dilawati secara berbeza CSS menyediakan pseudo-classes :link dan :visited untuk membezakan pautan dalam dua negeri
.
Pautan yang tidak dilawati dan pautan yang dilawati adalah saling eksklusif
pautan, yang bermaksud "pautan" dalam bahasa Cina
Tetapkan warna pautan yang ditentukan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a class="dreamdu" href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html> CSS: dilawati kelas pseudo
Sintaks: :dilawati
Versi CSS: CSS1
URL Rujukan: http://www.dreamdu.com/ css/pseudo -class_visited/
Penjelasan:
Terpakai pada pautan yang telah dilawati oleh pengguna
Terminal pengguna (contohnya: penyemak imbas) biasanya memaparkan pautan yang tidak dilawati dan pautan yang dilawati berbeza Untuk pautan, CSS menyediakan kelas pseudo :link dan :visited untuk membezakan antara dua pautan status
Pautan yang tidak dilawati dan pautan yang dilawati adalah saling eksklusif
dilawati, Maksud "dilawati" Cina
Tatabahasa
:dilawati
a:dilawati
a.kelas:dilawati
Contoh
a:dilawati
{
warna: hijau;
}
Gaya pautan yang dilawati yang ditakrifkan di atas ialah hijau
Bahasa dokumen menentukan elemen yang manakah merupakan rantaian sumber hiperpautan. Contohnya, dalam HTML, kelas pseudo pautan digunakan pada elemen dengan atribut href. Oleh itu, dua pengisytiharan CSS berikut adalah bersamaan
a:dilawati
{
warna: hijau;
}
:dilawati
{
warna: hijau;
}
Petua: Untuk pautan yang telah dilawati, penyemak imbas akan merekod Maklumat lawatan, sila kosongkan data cache penyemak imbas sebelum melihat contoh di bawah
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html> CSS :hover pseudo class
sesuai untuk apabila kursor (penunjuk tetikus) menghala ke elemen, tetapi elemen ini bukan Gaya apabila diaktifkan
Sintaks: :hover
Versi CSS: CSS2
Penerangan :
Digunakan apabila kursor (penunjuk tetikus) menghala ke elemen, tetapi elemen ini tidak diaktifkan
Pelanggan (penyemak imbas) boleh menukar kesan pemaparannya mengikut interaksi pengguna dengannya CSS menyediakan tiga kelas pseudo untuk situasi ini: tuding, aktif, fokus
Tiga kelas pseudo di atas bukan. Saling eksklusif, satu elemen boleh digunakan pada beberapa daripadanya pada masa yang sama
:legar pseudo-class, yang boleh digunakan apabila pengguna menghala ke elemen, seperti tetikus pengguna menghala ke perenggan p. Apabila pengguna meninggalkan elemen dengan tetikus, paparan gaya asal elemen dipulihkan
tuding, yang bermaksud "tinggal, tuding" dalam bahasa Cina
Sintaks
: hover
a:hover
a.class:hover
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 伪类示例</title>
<style type="text/css" media="all">
a:hover
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://www.php.cn">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>anchor pseudo-class
dalam penyemak imbas yang menyokong CSS Dalam penyemak imbas, keadaan pautan yang berbeza boleh dipaparkan dalam cara yang berbeza
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :anchor 伪类示例</title>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</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: Dalam definisi CSS, a:hover mesti diletakkan selepas a:link dan a:visited to menjadi berkesan.
Nota: Dalam definisi CSS, a:active mesti diletakkan selepas a:hover untuk menjadi sah.
Nota: Nama kelas pseudo tidak sensitif huruf besar-besaran.
CSS :kelas pseudo anak pertama
Sintaks: :anak pertama
Versi CSS: CSS2
URL Rujukan: http://www.dreamdu.com/css/pseudo-class_first-child/
Penerangan:
sepadan dengan elemen anak pertama unsur lain, contohnya: dalam div Termasuk berbilang elemen p, untuk memadankan elemen p pertama, anda boleh menggunakan: kelas pseudo anak pertama
pertama, yang bermaksud "pertama" dalam bahasa Cina, yang bermaksud "keturunan, nod anak" dalam bahasa Cina
Sintaksis
:anak pertama
E:anak pertama
E1>E2: anak pertama
Contoh
p > kod:anak pertama
{
warna:limau;
latar belakang:merah;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>CSS :lang pseudo-class
: Kelas pseudo lang memberi anda keupayaan untuk menentukan peraturan khas untuk bahasa yang berbeza
Nota: IE8 mesti mengisytiharkan <!DOCTYPE> untuk menyokong ;lang pseudo-class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>
bahagian seterusnya