Rumah > Artikel > hujung hadapan web > Apakah pemilih unsur pseudo css3?

Apakah pemilih unsur pseudo css3?

青灯夜游asal: 2021-12-16 11:45:092920semak imbas

pemilih unsur pseudo css3 termasuk: 1. “::selepas”, masukkan kandungan selepas kandungan elemen yang dipilih 2. “::sebelum”, masukkan kandungan sebelum kandungan elemen yang dipilih; . , "::first-letter"; 4. "::first-line";

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

elemen pseudo CSS digunakan untuk menggayakan bahagian elemen tertentu.

Sebagai contoh, ia boleh digunakan:

Tetapkan gaya huruf pertama dan baris pertama elemen
dalam kandungan elemen Sisipkan kandungan sebelum atau selepas

pemilih unsur pseudo css3 mempunyai

选择器	描述	例子	例子描述
::after	在被选元素的内容后面插入内容。（使用 content 属性来指定要插入的内容）	p::after	在每个元素之后插入内容。
::before	在被选元素的内容前面插入内容。（使用 content 属性来指定要插入的内容）	p::before	在每个元素之前插入内容。
::first-letter	用于选取指定选择器的首字母。	p::first-letter	选择每个元素的首字母。
::first-line	用于选取指定选择器的首行。	p::first-line	选择每个元素的首行。
::selection	匹配被用户选取的选取是部分。（支持的属性color、background、cursor 以及 outline。）	p::selection	选择用户选择的元素部分。

::elemen pseudo baris pertama

::elemen pseudo baris pertama digunakan untuk menambah gaya khas pada baris pertama teks.

Nota: Elemen pseudo baris pertama :: hanya boleh digunakan pada elemen peringkat blok.

Atribut berikut digunakan pada ::elemen pseudo baris pertama:

Atribut fon
Atribut warna
Atribut latar belakang
jarak perkataan
jarak huruf
hiasan teks
menjajarkan menegak
transformasi teks
ketinggian garisan
jelas

Contoh: Gayakan baris pertama dalam semua

elemen

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>

</body>
</html>

Apakah pemilih unsur pseudo css3?

::unsur pseudo huruf pertama

::unsur pseudo huruf pertama ialah digunakan untuk menambah teks Tambah gaya khas pada huruf pertama .

Nota: Elemen pseudo huruf pertama ::huruf pertama hanya berfungsi pada elemen peringkat blok.

Atribut berikut digunakan pada ::elemen pseudo huruf pertama:

Atribut fon
Atribut warna
Harta latar belakang
Harta margin
Harta padding
Atribut sempadan
hiasan teks
menjajarkan menegak (hanya jika "terapung" ialah "tiada")
teks-transformasi
garis-tinggi
terapung
jelas

Contoh: Gayakan baris pertama dalam semua

::sebelum dan ::selepas pseudo-elemen

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>您可以使用 ::first-letter 伪元素为文本的第一个字符添加特殊效果！</p>

</body>
</html>

::sebelum pseudo-elemen boleh digunakan untuk memasukkan beberapa kandungan sebelum kandungan elemen. Apakah pemilih unsur pseudo css3?

::after pseudo-element boleh digunakan untuk memasukkan beberapa kandungan selepas kandungan elemen.

::elemen pseudo pilihan

<!DOCTYPE html>
<html>
	<head>
		<style>
			p::before {
				content: "你好，";
			}

			p:after {
				content: "- 台词";
			}
		</style>
	</head>

	<body>

		<p>我是唐老鸭。</p>
		<p>我住在 Duckburg。</p>


	</body>
</html>

Apakah pemilih unsur pseudo css3?

::elemen pseudo pilihan yang sepadan dengan bahagian Elemen pemilihan pengguna.

Sifat CSS berikut boleh digunakan pada ::selection:

warna

latar belakang

kursor
garis besar
Contoh berikut menjadikan teks yang dipilih kelihatan merah pada latar belakang kuning:
Contoh:

(Belajar perkongsian video:

tutorial video css

)

<!DOCTYPE html>
<html>
	<head>
		<style>
			::-moz-selection {
				/* 针对 Firefox 的代码 */
				color: red;
				background: yellow;
			}

			::selection {
				color: red;
				background: yellow;
			}
		</style>
	</head>
	<body>

		<h1>请选择本页中的文本：</h1>

		<p>这是一个段落。</p>
		<div>这是 div 元素中的文本。</div>

		<p><b>注释：</b>Firefox 支持可供替代的 ::-moz-selection 属性。</p>

	</body>
</html>

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

html5 css css3 Float 选择器外边距内边距伪元素 background word

Kenyataan：

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 sebelumnya：Adakah terapung menduduki kedudukan dalam css3?Artikel seterusnya：Adakah terapung menduduki kedudukan dalam css3?

Artikel berkaitan

Lihat lagi