简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

unsur pseudo CSS

CSS Pseudo-element

CSS pseudo-element digunakan untuk menambah beberapa kesan khas pada pemilih.

Sintaks

Sintaks unsur pseudo:

pemilih:unsur pseudo {property:value;}

Kelas CSS juga boleh menggunakan elemen pseudo:

selector.class:pseudo-element {property:value;}

: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.article:first-letter {color:#ff0000; }

<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
< tbody>< th width="63%" align="left">Contoh penerangan < td>Pilih semua pautan yang tidak dilawati< tr>< td>:focus< setiap
elemen tr>< td>:first-line elemen >< td class="notranslate">p:lang(it )

PemilihContoh
:linka:link
:dilawatia:dilawatiPilih semua pautan yang dilawati Pautan< /td>
:activea:activePilih pautan aktif:hovera:hoverKeadaan meletakkan tetikus pada pautan
input:focusElemen yang dipilih mempunyai fokus selepas input
:first - letterp:first-letterPilih huruf pertama

p:first-linePilih baris pertama
:first-childp:first-childPemilih sepadan dengan anak pertama bagi mana-mana elemen Element's<]p>
:sebelump:sebelumSisipkan kandungan sebelum setiap elemen

:selepasp:selepasSisipkan kandungan selepas setiap

elemen
:lang(bahasa)Pilih nilai permulaan untuk atribut lang bagi elemen

选择器示例示例说明
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个

元素的第一个字母

:first-linep:first-line选择每个

元素的第一行

:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:beforep:before在每个

元素之前插入内容

:afterp:after在每个

元素之后插入内容

:lang(language)p:lang(it)为

元素的lang属性选择一个开始值

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <style> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body> <p>您可以使用:线伪元素添加特殊效果的第一行文本。</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • 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~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492155 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！