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

unsur pseudo CSS

elemen pseudo CSS

elemen pseudo CSS digunakan untuk menambah beberapa kesan khas pada pemilih.

Syntax

Pseudo-element syntax:

selector:pseudo-element {property:value;}

Kelas CSS juga boleh menggunakan pseudo-element:

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

:first-line pseudo-element

"first-line" pseudo-element digunakan untuk menambah ke baris pertama teks Tetapkan gaya khas.

Nota: elemen pseudo "baris pertama" hanya boleh digunakan untuk elemen peringkat blok.

Nota: Sifat berikut boleh digunakan pada unsur pseudo "baris pertama":

sifat fon

sifat warna

sifat latar belakang< . ketinggian baris

jelas

:elemen pseudo huruf pertama

elemen pseudo "huruf pertama" digunakan untuk menetapkan gaya khas kepada huruf pertama teks

Nota: Elemen pseudo "huruf pertama" hanya boleh digunakan untuk elemen peringkat blok.

Nota: Sifat berikut boleh digunakan pada unsur pseudo "huruf pertama":

sifat fon

sifat warna sifat latar belakang< . ")

teks-transformasi

garis-tinggi

terapung

jelas

unsur pseudo dan Kelas CSS

Elemen pseudo boleh digabungkan dengan kelas CSS:

p.article:huruf pertama {color:#ff0000;}

< ;p class="article ">Satu perenggan dalam artikel</p>

Contoh di atas akan menjadikan huruf pertama semua perenggan dengan artikel kelas menjadi 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. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</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>

CSS - :before pseudo-element

":before" pseudo-element boleh memasukkan kandungan baharu sebelum kandungan elemen. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before 伪元素示例</title>
<style type="text/css" media="all">
div::before
{
background: lightgreen;
content: "张三";
}
</style>
</head>
<body>
<div>今天来学习知识</div>
</body>
</html>

CSS - :after pseudo-element

":after" pseudo-element boleh memasukkan kandungan baharu selepas kandungan elemen. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::after 伪元素示例</title>
<style type="text/css" media="all">
div::after
{
background: lightgreen;
content: "周末";
}
</style>
</head>
<body>
<div>今天是</div>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS ::before 伪元素示例</title> <style type="text/css" media="all"> div::before { background: lightgreen; content: "张三"; } </style> </head> <body> <div>今天来学习知识</div> </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)  492119 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！