CSS pseudo-kelas
CSS penyeleksi pseudo-kelas yang digunakan untuk menambahkan beberapa efek khusus.
tatabahasa
sintaks pseudo-class:
Kelas CSS juga dapat menggunakan pseudo-class:
kelas semu anchor
dukungan CSS di browser, negara yang berbeda dari link dapat ditampilkan dengan cara yang berbeda
contoh
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Coba »
Catatan: definisi CSS, a: hover harus ditempatkan dalam: link dan a: setelah mengunjungi, efektif.
Catatan: definisi CSS, a: active harus ditempatkan dalam: hover setelah, untuk menjadi efektif.
Catatan: Nama pseudo-kelas tidak case-sensitive.
Pseudo-kelas dan kelas CSS
Pseudo-kelas dapat digunakan bersama dengan kelas CSS:
<a class="red" href="css-syntax.html"> CSS Syntax </a>
Jika link di atas contoh telah dikunjungi, itu akan ditampilkan dalam warna merah.
CSS -: pertama - anak pseudo-class
Anda dapat menggunakan: pertama-anak pseudo-class memilih elemen anak pertama
Catatan: Anda harus dideklarasikan dalam versi sebelumnya dari IE8 <DOCTYPE!> , Seperti ini: pertama-anak untuk berlaku.
Mencocokkan pertama <p> elemen
Pada contoh berikut, pemilih sesuai dengan <p> elemen sebagai anak pertama dari setiap elemen elemen:
contoh
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Coba »
Cocok dengan semua <p> elemen di pertama <i> elemen
Pertama <i> elemen dalam contoh berikut, pemilih pertandingan setiap <p> elemen:
contoh
<head>
<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>
</body>
</html>
Coba »
<H2 Pertandingan semua sebagai elemen anak pertama dari <p> elemen dalam semua <i> elemen:
contoh
<head>
<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>
</body>
</html>
Coba »
CSS -: lang pseudo-class
: Lang pseudo-class memungkinkan Anda untuk memiliki kemampuan untuk bahasa yang berbeda mendefinisikan aturan khusus
Catatan: IE8 harus menyatakan <DOCTYPE!> Untuk mendukung; lang pseudo-class.
Pada contoh berikut ,: lang jenis kelas nilai atribut q ada definisi elemen kutipan:
contoh
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Coba »
contoh yang lebih
Tambahkan gaya yang berbeda untuk hyperlink
Contoh ini menunjukkan bagaimana untuk menambahkan gaya lain untuk hyperlink.
Gunakan: Fokus
Contoh ini menunjukkan bagaimana menggunakan: fokus pseudo-class.
Semua CSS pseudo-kelas / elemen
| Pemilih | contoh | misalnya acara |
|---|---|---|
| : diperiksa | input:checked | Semua bentuk elemen yang dipilih |
| : dinonaktifkan | input:disabled | Pilih semua elemen bentuk cacat |
| : kosong | p:empty | Pilih semua elemen p tidak memiliki anak |
| : diaktifkan | input:enabled | Pilih semua elemen form diaktifkan |
| : Pertama-of-jenis | p:first-of-type | Pilih setiap elemen induk adalah elemen anak p p elemen pertama |
| : Di-range | input:in-range | Pilih nilai elemen dalam kisaran tertentu |
| : valid | input:invalid | Pilih semua elemen yang tidak valid |
| : Terakhir anak | p:last-child | Pilih semua elemen p dalam elemen anak terakhir |
| : Terakhir dari tipe- | p:last-of-type | Pilih setiap p elemen adalah elemen terakhir dari orang tua elemen p |
| : Tidak (pemilih) | :not(p) | Pilih semua elemen selain p |
| : N-anak (n) | p:nth-child(2) | Pilih semua elemen p di sub-elemen kedua |
| : N-lalu-anak (n ) | p:nth-last-child(2) | Pilih semua unsur kebalikan dari p elemen anak kedua |
| : N terakhir dari tipe- (n) | p:nth-last-of-type(2) | Pilih semua elemen p adalah kebalikan dari kedua sub-elemen p |
| : N-of-tipe (n ) | p:nth-of-type(2) | Pilih semua elemen p di sub-elemen kedua untuk p |
| : Hanya-of-jenis | p:only-of-type | Pilih semua hanya elemen anak dari elemen p |
| : Hanya-anak | p:only-child | Pilih semua hanya elemen anak dari elemen p |
| : opsional | input:optional | Memilih untuk tidak "dibutuhkan" atribut dari elemen |
| : Out-of-range | input:out-of-range | Pilih atribut elemen luar kisaran tertentu dari nilai-nilai |
| : Read-only | input:read-only | Pilih atribut read-only dari atribut elemen |
| : Baca-tulis | input:read-write | Memilih untuk tidak read-only atribut dari sifat elemen |
| : dibutuhkan | input:required | Pilih "diperlukan" atribut menentukan sifat unsur |
| : root | root | Pilih elemen akar dokumen |
| : Target | #news:target | Pilih elemen aktivitas saat #news (klik pada URL yang berisi nama anchor) |
| : valid | input:valid | Pilih semua nilai yang valid untuk properti |
| : link | a:link | Pilih semua link yang belum dikunjungi |
| : mengunjungi | a:visited | Pilih semua link yang dikunjungi |
| : aktif | a:active | Pilih adalah link aktif |
| : hover | a:hover | Menempatkan mouse pada status link |
| : fokus | input:focus | Setelah memilih elemen input memiliki fokus |
| : Pertama-surat | p:first-letter | Pilih huruf pertama dari setiap <p> elemen |
| : Lini pertama | p:first-line | Pilih baris pertama dari setiap <p> elemen |
| : Pertama-anak | p:first-child | <] P> pemilih elemen cocok dengan elemen yang tergabung dalam elemen anak pertama |
| : sebelum | p:before | Sisipkan konten sebelum setiap <p> elemen |
| : setelah | p:after | Sisipkan konten setelah setiap <p> elemen |
| : Lang (bahasa) | p:lang(it) | lang pilihan atribut <p> elemen ke nilai awal |