CSS Pseudo-element
CSS pseudo-element digunakan untuk menambah beberapa kesan khas pada pemilih.
Sintaks
Sintaks unsur pseudo:
Kelas CSS juga boleh menggunakan elemen pseudo:
:first-line pseudo Elemen
elemen pseudo "baris pertama" digunakan untuk menetapkan gaya khas pada baris pertama teks.
Dalam contoh berikut, penyemak imbas akan memformat baris pertama teks elemen p mengikut gaya dalam elemen pseudo "baris pertama":
<!DOCTYPE html> <html> <head> <style> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body> <p>您可以使用:线伪元素添加特殊效果给第一行文本。</p> </body> </html>
Jalankan program Cuba
Nota: elemen pseudo "baris pertama" hanya boleh digunakan dengan elemen peringkat blok.
Nota: Sifat berikut boleh digunakan pada elemen pseudo "baris pertama":
- sifat fon
- sifat warna
- sifat latar belakang
- jarak perkataan
- jarak huruf
- hiasan teks
- jajaran menegak
- transformasi teks
- tinggi garis
- jelas
:elemen pseudo huruf pertama
"first- letter" pseudo-element Digunakan untuk menetapkan gaya khas kepada huruf pertama teks:
Contoh
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p:first-letter { color:#ff0000; font-size:xx-large; } </style> </head> <body> <p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p> </body> </html>
Jalankan atur cara untuk mencubanya keluar
Nota: Elemen pseudo "huruf pertama" hanya boleh digunakan dengan elemen peringkat blok.
Nota: Sifat berikut boleh digunakan pada unsur pseudo "huruf pertama":
- sifat fon
- sifat warna
- sifat latar belakang
- sifat margin
- sifat padding
- sifat sempadan
- hiasan teks
- penjajaran menegak (hanya jika "terapung" ialah "tiada")
- transformasi teks
- tinggi garis
- terapung
- jelas
Unsur pseudo dan kelas CSS
Unsur pseudo boleh digabungkan dengan kelas CSS:
<p class="article">Satu perenggan dalam artikel</p>
Contoh di atas akan menjadikan huruf pertama semua perenggan dengan artikel kelas bertukar merah.
Berbilang Pseudo-elemen
boleh digunakan dalam kombinasi dengan berbilang pseudo-elemen.
Dalam contoh di bawah, huruf pertama perenggan akan muncul dalam warna merah dan saiz fonnya ialah xx-besar. Selebihnya teks dalam baris pertama akan berwarna biru dan muncul dalam huruf besar kecil.
Selebihnya teks dalam perenggan akan dipaparkan dalam saiz dan warna fon lalai:
Contoh
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } </style> </head> <body> <p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p> </body> </html>
Jalankan atur cara untuk mencubanya
CSS - :before pseudo-element
":before" pseudo-element boleh memasukkan kandungan baharu sebelum kandungan elemen.
Contoh berikut memasukkan imej sebelum setiap elemen <h1>
CSS - :after pseudo-element
":after" pseudo-element boleh memasukkan kandungan baharu selepas kandungan elemen. Contoh berikut menyisipkan imej selepas setiap elemen <h1> 🎜>
Semua kelas/elemen pseudo CSSPemilih | Contoh | < th width="63%" align="left">Contoh penerangan||||
---|---|---|---|---|---|
:link | a:link | < td>Pilih semua pautan yang tidak dilawati||||
:dilawati | a:dilawati | Pilih semua pautan yang dilawati Pautan< /td> | |||
:active | a:active | Pilih pautan aktif | tr>< tr>:hover | a:hover | Keadaan meletakkan tetikus pada pautan |
input:focus | Elemen yang dipilih mempunyai fokus selepas input | ||||
:first - letter | p:first-letter | Pilih huruf pertama | p:first-line | Pilih baris pertama | elemen >|
:first-child | p:first-child | Pemilih sepadan dengan anak pertama bagi mana-mana elemen Element's<]p> | |||
:sebelum | p:sebelum td> | Sisipkan kandungan sebelum setiap elemen | |||
:selepas | p:selepas | Sisipkan kandungan selepas setiap elemen | |||
:lang(bahasa) | < td class="notranslate">p:lang(it )Pilih nilai permulaan untuk atribut lang bagi elemen |
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个 元素的第一个字母 |
:first-line | p:first-line | 选择每个 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
:before | p:before | 在每个 元素之前插入内容 |
:after | p:after | 在每个 元素之后插入内容 |
:lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |