unsur pseudo CSS
elemen pseudo CSS
elemen pseudo CSS digunakan untuk menambah beberapa kesan khas 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":
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>可以使用:first-line伪元素为文本的第一行添加特殊效果。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
</p>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Nota: Elemen pseudo "baris pertama" hanya boleh digunakan pada elemen peringkat blok.
Nota: Atribut berikut boleh digunakan pada elemen pseudo "baris pertama":
atribut fon
atribut warna
atribut latar belakang
atribut jarak perkataan
atribut jarak huruf
atribut hiasan teks
atribut penjajaran menegak
teks -transform attribute
line-height attribute
clear attribute
: pertama -huruf pseudo Elemen
"huruf pertama" pseudo-elemen 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>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式！</p>
</body>
</html> Run Example»
Klik butang "Run Example" untuk melihat contoh dalam talian
Nota: "first- letter" pseudo-element hanya boleh digunakan untuk elemen peringkat blok .
Nota: Atribut berikut boleh digunakan pada elemen pseudo "huruf pertama":
atribut fon
atribut warna
atribut latar belakang
atribut margin
atribut atribut
atribut sempadan
atribut hiasan teks
atribut penjajaran menegak (hanya jika "terapung: tiada")
atribut transformasi teks
atribut ketinggian garis
atribut apungan
atribut jelas
Pseudo-elemen dan kelas CSS
Pseudo-elemen boleh digabungkan dengan Kelas CSS:
<p class="article">Artikel perenggan</p>
Contoh di atas akan menjadikan huruf pertama semua perenggan dengan artikel kelas berwarna merah.
Berbilang unsur pseudo
boleh digunakan dalam kombinasi dengan berbilang unsur pseudo.
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.
Baki 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>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>Jalankan Contoh»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
CSS - :before pseudo-element
":before" pseudo -elemen boleh digunakan dalam kandungan elemen Masukkan kandungan baharu di hadapan.
Contoh berikut menyisipkan imej sebelum setiap elemen <h1> 🎜>
Klik butang "Run Example" untuk melihat contoh dalam talian":after" pseudo element boleh digunakan dalam elemen Masukkan kandungan baharu selepas kandungan. Contoh berikut menyisipkan imej selepas setiap elemen <h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>
Jalankan Instance»Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Semua kelas/elemen pseudo CSS
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
