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 CSS| Pemilih | 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>: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 | 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属性选择一个开始值 |
- Cadangan kursus
- Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~ 