Apakah Perbezaan Antara Kelas Pseudo CSS dan Unsur Pseudo?-tutorial css-php.cn

Apakah Perbezaan Antara Kelas Pseudo CSS dan Unsur Pseudo?

Patricia Arquette

Lepaskan： 2024-12-14 03:27:09

asal

673 orang telah melayarinya

What's the Difference Between CSS Pseudo-Classes and Pseudo-Elements?

Perbezaan antara Kelas Pseudo CSS dan Elemen Pseudo

Gambaran Keseluruhan

Kelas pseudo CSS dan elemen pseudo kedua-duanya digunakan untuk meningkatkan kekhususan pemilih , tetapi mereka memainkan peranan yang berbeza dalam penggayaan.

Kelas Pseudo

Kelas Pseudo digunakan untuk menyasarkan elemen berdasarkan keadaan atau kelakuannya. Mereka bermula dengan titik bertindih (:) diikuti dengan kata kunci atau nilai dalam kurungan. Kelas pseudo boleh termasuk maklumat yang tidak boleh diperoleh daripada struktur dokumen, seperti:

:tuding - On hover
:aktif - Apabila diklik
: sasaran - Elemen dengan ID tertentu yang sepadan dengan cincang dalam URL

Pseudo-Elements

Pseudo-element mencipta elemen maya yang tidak terdapat dalam dokumen, tetapi boleh digayakan dan dimanipulasi. Mereka bermula dengan dua titik bertindih (::) diikuti dengan kata kunci. Elemen pseudo menyediakan akses kepada kandungan dan ciri yang sebaliknya tidak tersedia, seperti:

::baris pertama - Baris pertama teks
::sebelum - Kandungan disisipkan sebelum elemen
::selepas - Kandungan dimasukkan selepas elemen

Kekunci Perbezaan

Feature	Pseudo-Class	Pseudo-Element
Purpose	Selects elements	Creates virtual elements
Syntax	element:keyword	element::keyword
Example	a:hover	p::before
Content Manipulation	N/A	Supports content generation and modification
Multiple Instances	Multiple allowed	Only one per selector

Contoh Penggunaan

Untuk menggunakan warna latar belakang pada elemen dengan kelas "penting" apabila dituding di atas:

.important:hover {
  background-color: #FF0000;
}

Salin selepas log masuk

Untuk menambah tag bahasa selepas petikan pada halaman:

q::after {
  content: " (Language: " attr(lang) ")";
}

Salin selepas log masuk

Ringkasan

Kelas pseudo digunakan untuk memilih elemen berdasarkan konteks atau gelagatnya, manakala elemen pseudo mencipta elemen maya dengan kandungan yang boleh diakses dan pilihan penggayaan. Memahami perbezaan ini adalah penting untuk penggunaan berkesan teknik CSS lanjutan ini.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Kelas Pseudo CSS dan Unsur Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!