Fahami perbezaan antara unsur pseudo dan kelas pseudo-tutorial css-php.cn

Fahami perbezaan antara unsur pseudo dan kelas pseudo

王林

Lepaskan： 2024-01-05 16:44:15

asal

1277 orang telah melayarinya

Fahami perbezaan antara unsur pseudo dan kelas pseudo

Memahami perbezaan antara pseudo-element dan pseudo-class memerlukan contoh kod khusus

Apabila menulis gaya CSS, kita sering menghadapi penggunaan pseudo-element (pseudo-element) dan pseudo-class (pseudo-class). Walaupun ia kelihatan serupa, terdapat beberapa perbezaan dalam cara ia digunakan dan cara ia berfungsi. Artikel ini akan memperkenalkan definisi, penggunaan dan contoh unsur pseudo dan kelas pseudo secara terperinci untuk lebih memahami perbezaannya.

Pseudo-class
Pseudo-class ialah kata kunci khas yang digunakan untuk memilih elemen, diwakili dengan menggunakan titik bertindih (:) selepas pemilih elemen. Kelas pseudo menunjukkan keadaan elemen istimewa, seperti alih tetikus, pautan yang dilawati, dsb. Berikut ialah beberapa contoh kelas pseudo yang biasa digunakan:

:hover: Pilih elemen yang tetikus tuding di atasnya.
:aktif: Pilih elemen yang diklik.
:fokus: Pilih elemen yang mendapat fokus.
:dilawati: Pilih pautan yang telah dilawati.
:first-child: Pilih elemen anak pertama elemen.
:last-child: Pilih elemen anak terakhir bagi sesuatu elemen.
:nth-child(n): Pilih elemen anak ke-n bagi sesuatu elemen.
:not(selector): Pilih elemen yang tidak sepadan dengan pemilih yang diberikan.

Berikut ialah contoh kod menggunakan kelas pseudo untuk menukar warna latar belakang butang apabila tetikus dilegar di atasnya:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
}

.button:hover {
  background-color: red;
}
</style>
</head>
<body>
<button class="button">按钮</button>
</body>
</html>

Salin selepas log masuk

Pseudo-element (Pseudo-element)
Pseudo-element juga merupakan elemen khas yang digunakan untuk memilih elemen Kata kunci diwakili dengan menggunakan dua titik bertindih (::) selepas pemilih elemen. Elemen pseudo digunakan untuk menambah beberapa gaya khas pada elemen, seperti menambahkan kandungan sebelum dan selepas elemen, menukar gaya fon elemen, dsb. Berikut ialah beberapa contoh unsur pseudo yang biasa digunakan:

::sebelum: Sisipkan kandungan sebelum elemen.
::selepas: Sisipkan kandungan selepas elemen.
::huruf pertama: Pilih huruf pertama dalam elemen.
::first-line: Pilih baris pertama dalam elemen.
::selection: Pilih teks yang dipilih oleh pengguna.

Berikut ialah contoh kod menggunakan elemen pseudo untuk memasukkan ikon anak panah di hadapan perenggan:

<!DOCTYPE html>
<html>
<head>
<style>
.arrow::before {
  content: "➡";
  margin-right: 10px;
}

p {
  font-size: 16px;
  line-height: 1.5;
}
</style>
</head>
<body>
<p class="arrow">这是一个段落。</p>
</body>
</html>

Salin selepas log masuk

Melalui contoh di atas, kita dapat melihat dengan jelas perbezaan penggunaan dan kefungsian kelas pseudo dan elemen pseudo tempat. Kelas pseudo digunakan untuk memilih keadaan khas unsur, manakala unsur pseudo digunakan untuk menambah gaya khas pada unsur.

Untuk mengikut amalan terbaik semasa menulis kod, kita harus menggunakan kelas pseudo dan elemen pseudo secara munasabah untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Pada masa yang sama, kita juga harus memahami keserasian dan sekatan penggunaan setiap kelas pseudo dan elemen pseudo untuk mengelakkan masalah kegagalan gaya dalam sesetengah pelayar.

Untuk meringkaskan, memahami perbezaan antara kelas pseudo dan elemen pseudo adalah penting untuk menulis tapak web interaktif dan visual. Hanya dengan memahami penggunaan dan perbezaannya secara mendalam, kami boleh menggunakannya dengan lebih baik dan mencipta reka bentuk web yang lebih baik.

Atas ialah kandungan terperinci Fahami perbezaan antara unsur pseudo dan kelas pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!