masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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)  492360 permainan