kelas pseudo CSS
Kelas pseudo CSS (Kelas Pseudo)
Kelas pseudo CSS digunakan untuk menambah beberapa kesan khas pada pemilih.
Sintaks
Sintaks kelas pseudo:
pemilih:pseudo-class {property:value;}
Kelas 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
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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="http://www.php.cn/css/css-css_tutorial.html" 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>Run Example»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Nota: Dalam definisi CSS, a:hover mesti diletakkan di antara a:link dan Ia hanya sah selepas a:dilawati.
Nota: Dalam definisi CSS, a:active mesti diletakkan selepas a:hover untuk menjadi sah.
Nota: Nama kelas pseudo tidak sensitif huruf besar-besaran.
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.
CSS - :first - child pseudo-class
Anda boleh menggunakan :first-child pseudo-class untuk memilih elemen anak pertama elemen
Nota: Dalam versi sebelumnya IE8, <!DOCTYPE> mesti diisytiharkan supaya :anak pertama boleh berkuat kuasa.
Memadankan <p> elemen pertama
Dalam contoh berikut, pemilih sepadan dengan elemen <p> 🎜>Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian Memadankan elemen <i> pertama antara semua <p> elemen
Dalam contoh berikut, pilih semua <p> >
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8以及更早版本的浏览器, DOCTYPE必须已经定义.</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
sepadan dengan semua elemen <i> yang merupakan anak pertama bagi elemen Dalam contoh di bawah, pemilih memadankan semua elemen <i> ;i> elemen dalam elemen kanak-kanak <p>
Jalankan instance»
Klik butang "Run instance" untuk melihat contoh dalam talian
CSS - :lang pseudo class
:lang Pseudo-class memberi anda keupayaan untuk mentakrifkan peraturan khas untuk bahasa yang berbeza
Nota: IE8 mesti mengisytiharkan <!DOCTYPE> untuk menyokong ;lang pseudo-class.
Dalam contoh berikut, kelas :lang mentakrifkan jenis petikan untuk elemen q dengan nilai atribut no:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>Jalankan Instans»
Klik butang "Jalankan Instans" untuk melihat kejadian dalam talian
Lagi Instans
Contoh: Tambahkan gaya berbeza pada hiperpautan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Contoh ini menunjukkan cara menambah gaya tambahan pada hiperpautan.
Instance: Gunakan: fokus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>Run instance»
Klik butang "Run Instance" untuk melihat dalam talian contoh
Contoh ini menunjukkan cara menggunakan kelas pseudo :focus.
Semua kelas/elemen pseudo CSS
| Pemilih | Contoh | Penerangan contoh |
|---|---|---|
| :ditanda | input:ditanda | Pilih semua elemen borang yang dipilih |
| : dilumpuhkan | input:dilumpuhkan | Pilih semua elemen borang yang dilumpuhkan |
| :kosong | p:kosong | Memilih semua elemen p tanpa elemen anak |
| :didayakan | input:didayakan | Pilih semua elemen borang yang didayakan |
| :first-of-type | p:first-of-type | Pilih elemen p anak pertama bagi setiap elemen induk iaitu elemen p |
| :dalam julat | input:dalam julat | Pilih nilai dalam julat elemen yang ditentukan |
| :tidak sah | input:tidak sah | Pilih semua elemen tidak sah |
| :anak terakhir | p:anak terakhir | Pilih elemen anak terakhir bagi semua elemen p |
| :jenis-terakhir | p:jenis-terakhir | Memilih elemen p terakhir untuk setiap elemen p yang merupakan induknya |
| :bukan(pemilih) | :bukan(p) | Pilih semua elemen selain p |
| :nth-child(n) | p:nth-child(2) | Pilih elemen anak kedua bagi semua elemen p |
| :anak-terakhir(n) | p:anak-terakhir(2) | Pilih semua elemen p Unsur anak kedua terakhir |
| :jenis-terakhir-terakhir(n) | p:jenis-terakhir-terakhir (2) | Pilih subelemen p kedua hingga terakhir untuk semua elemen p |
| :nth-of-type(n) | p:nth-of-type(2) | Pilih semua elemen p yang unsur anak kedua ialah p |
| : only-of-type | p:only-of-type | Pilih semua elemen dengan hanya satu elemen anak p |
| :only-child | p:anak tunggal | Pilih semua elemen p dengan hanya seorang anak |
| :pilihan | input :pilihan | Pilih atribut elemen tanpa "diperlukan" |
| :luar julat | input:luar julat | Pilih elemen atribut dengan nilai di luar julat yang ditentukan |
| :baca sahaja | input:baca sahaja | Pilih atribut baca sahaja Atribut elemen |
| :baca-tulis | input:baca-tulis | Pilih atribut elemen |
| input:diperlukan | Pilih atribut elemen yang ditentukan oleh atribut "diperlukan" | |
| : root | rootPilih elemen akar dokumen | |
| :sasaran | #news:targetPilih elemen #news yang sedang aktif (URL klik mengandungi nama sauh) | |
| input: sah | Pilih Semua sifat dengan nilai yang sah | |
| :pautan | a:pautanPilih semua pautan yang belum dilawati | |
| :dilawati | a:dilawatiPilih semua pautan yang dilawati | |
| :aktif | a:aktifPilih pautan aktif | |
| :tuding | a:hoverKeadaan meletakkan tetikus pada pautan | |
| :fokus | input:fokusPilih elemen untuk mempunyai fokus selepas input | |
| :huruf pertama | p:huruf pertamaPilih setiap huruf pertama <p> elemen | |
| :baris pertama | p:baris pertamaPilih baris pertama setiap <p> elemen | |
| :anak pertama | p:anak pertamaPemilih sepadan dengan <]p> elemen yang merupakan anak pertama bagi mana-mana elemen | |
| :sebelum | p:sebelum | Sisipkan kandungan sebelum setiap elemen <p> |
| :selepas | p:selepas | Sisipkan kandungan selepas setiap <p> elemen |
| :lang(bahasa) | p:lang(it) | Pilih nilai permulaan untuk atribut lang bagi elemen <p> |
