cari

Rumah  >  Artikel  >  hujung hadapan web  >  unsur pseudo CSS

unsur pseudo CSS

WBOY
WBOYke hadapan
2023-09-10 21:09:01714semak imbas

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*/;
}

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>
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🎜🎜🎜 #🎜 🎜# strong>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>

Output
#🎜🎜 #

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

css css3 伪类 伪元素
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menggunakan atribut flex CSS3 untuk mencapai kesan lata susun atur halaman web?Artikel seterusnya：Bagaimana untuk menggunakan atribut flex CSS3 untuk mencapai kesan lata susun atur halaman web?

Artikel berkaitan

Lihat lagi