unsur pseudo CSS-tutorial css-php.cn

Kita boleh menggayakan bahagian tertentu bagi sesuatu elemen, seperti huruf pertama, baris pertama, malah sisipan sebelum/selepasnya. Untuk tujuan ini, gunakan elemen pseudo CSS.

Nota - Untuk mengasingkan kelas pseudo CSS daripada unsur pseudo, dalam CSS3, unsur pseudo menggunakan tatatanda bertitik dua.

Syntax

Berikut ialah sintaks untuk menggunakan elemen pseudo CSS pada elemen-

Selector::pseudo-element {
   css-property: /*value*/;
}

Salin selepas log masuk

Yang berikut adalah pseudo-elemen CSS yang tersedia -#🎜🎜 Tidak 🎜#

1selepas2sebelum4#🎜 🎜 # pemegang tempatIa memilih teks pemegang tempat dalam elemen borang#🎜 Ia memilih🎜 pemilihan Bahagian elemen Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   background-color: black;
}
p::first-line {
   background-color: lightgreen;
   color: white;
}
span {
   font-size: 2em;
   color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci unsur pseudo CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：tutorialspoint.com

Artikel sebelumnya：Bagaimana untuk menggunakan atribut flex CSS3 untuk mencapai kesan lata susun atur halaman web? Artikel seterusnya：Belajar CSS3 dari awal: Kuasai teknologi teras secara beransur-ansur

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1842

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2014

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1696

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

1596

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

1613

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

	Masukkan beberapa kandungan selepas setiap elemen yang disebut #🎜🎜 🎜#
	#🎜🎜🎜 setiap kandungan #🎜🎜🎜🎜🎜 kandungan unsur # Ia memilih huruf pertama bagi setiap unsur yang disebut
first-line	Ia memilih baris pertama setiap elemen yang disebut #🎜🎜🎜🎜🎜🎜 5
	Mari kita lihat contoh unsur pseudo CSS - #🎜🎜 🎜🎜#Contoh
Output	Mari lihat satu lagi contoh CSS pseudo-elements🎜🎜🎜 #🎜 🎜#Contoh Demonstrasi masa nyata <!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after { content: " LEGEND!"; background: orange; padding: 5px; } div:nth-of-type(2) p:nth-child(2)::before { content: "Book:"; background-color: lightblue; font-weight: bold; padding: 5px; } </style> </head> <body> <div> <p>Cricketer</p> <p>Sachin Tendulkar:</p> </div> <hr> <div> <p><q>Chase your Dreams</q></p> <p><q>Playing It My Way</q></p> </div> </body> </html> Salin selepas log masuk Output
#🎜🎜 #