kelas pseudo CSS
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 dilawatiKelas pseudo mengelaskan elemen melalui tiga cirinya: nama, atribut atau kandungan. Pada dasarnya, ia adalah ciri yang tidak boleh diperolehi dalam dokumen HTMLCSS :link pseudo-class:link -- CSS :link pseudo-class, sesuai untuk pautan yang belum dilawati oleh penggunaSintaks: :linkVersi CSS: CSS1
.
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 偽類示例，對指定鏈接設(shè)置顏色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點擊跳轉(zhuǎn)</a></p>
<p><a class="dreamdu" href="http://ipnx.cn">點擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點擊跳轉(zhuǎn)</a></p>
</body>
</html> CSS: dilawati kelas pseudo<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 偽類示例，設(shè)置已訪問鏈接的顏色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點擊跳轉(zhuǎn)</a></p>
</body>
</html> CSS :hover pseudo class 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://ipnx.cn">點擊跳轉(zhuǎn)</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 之后，需要嚴(yán)格按順序才能看到效果。</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中文網(wǎng)</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>這是個測試</p>
<p>這是個測試</p>
<p><b>注意:</b>對于 :first-child 工作于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.</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中文網(wǎng)</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> 僅當(dāng) !DOCTYPE已經(jīng)聲明時 IE8支持 :lang.</p>
</body>
</html>
