Terokai konsep asas dan senario penggunaan kelas pseudo CSS dan elemen pseudo

Fahami konsep asas dan senario aplikasi kelas pseudo CSS dan elemen pseudo

CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk menerangkan gaya halaman web. Ia boleh mengawal penampilan dan reka letak elemen dalam laman web. Dalam CSS, kelas pseudo dan elemen pseudo adalah fungsi yang sangat berguna yang boleh mengembangkan lagi skop aplikasi dan fleksibiliti CSS.

1. Kelas Pseudo

Kelas Pseudo ialah kata kunci yang digunakan untuk memilih elemen status tertentu. Kelas pseudo biasa termasuk: hover, aktif, fokus, dsb. Berikut ialah contoh penggunaan beberapa kelas pseudo biasa:

1. :kelas pseudo hover

:kelas pseudo hover digunakan untuk memilih keadaan tetikus yang melayang di atas elemen.

a:hover {
  color: red;
}

2. :kelas pseudo aktif

:kelas pseudo aktif digunakan untuk memilih keadaan elemen apabila ia diklik.

button:active {
  background-color: blue;
}

3. :fokus pseudo-class

:fokus pseudo-class digunakan untuk memilih elemen input terfokus.

input:focus {
  border: 2px solid red;
}

2. Elemen Pseudo

Elemen Pseudo ialah kata kunci yang digunakan untuk memasukkan kandungan tertentu sebelum atau selepas kandungan elemen. Elemen pseudo biasa termasuk: sebelum dan selepas. Berikut ialah beberapa contoh biasa penggunaan unsur pseudo:

1. ::sebelum unsur pseudo

::sebelum unsur pseudo digunakan untuk memasukkan kandungan tertentu sebelum kandungan unsur.

p::before {
  content: "before";
  color: red;
}

2. ::after pseudo-element

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

p::after {
  content: "after";
  color: blue;
}

3. Senario aplikasi

Kelas pseudo dan elemen pseudo mempunyai banyak senario aplikasi praktikal dalam reka bentuk gaya halaman web. Berikut mengambil keperluan biasa sebagai contoh untuk menggambarkan penggunaan kelas pseudo dan unsur pseudo.

Katakan kita mempunyai bar navigasi pada halaman web dengan beberapa pautan navigasi. Kami mahu warna pautan navigasi berubah apabila tetikus dilegar di atasnya dan menambah pemisah garis menegak antara pautan navigasi.

Kod HTML adalah seperti berikut:

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

Kod CSS adalah seperti berikut:

.nav a {
  color: black;
  text-decoration: none;
  padding: 10px;
}

.nav a:hover {
  color: red;
}

.nav a:not(:last-child)::after {
  content: "|";
  padding-left: 10px;
  padding-right: 10px;
  color: gray;
}

Dalam kod di atas, kami mula-mula menetapkan warna dan gaya lalai untuk pautan navigasi. Kemudian menggunakan pemilih kelas pseudo :hover, apabila tetikus melayang di atas pautan navigasi, warna pautan bertukar kepada merah.

Seterusnya, kami menggunakan pemilih :not pseudo-class untuk memilih pautan lain kecuali pautan navigasi terakhir. Kemudian gunakan ::after pseudo-element untuk menambah pemisah paip selepas setiap pautan dan gayakan pemisah.

Dengan kod di atas, kami boleh mencapai kesan menukar warna pautan navigasi semasa melayang, dan menambah pemisah garis menegak antara pautan.

Ringkasan:

Kelas pseudo dan elemen pseudo memainkan peranan yang sangat penting dalam CSS dan boleh membantu kami mencapai kesan gaya yang lebih fleksibel dan kompleks. Dengan menggunakan kelas pseudo dan elemen pseudo dengan betul, kami boleh mengawal gaya halaman web dengan lebih baik dan meningkatkan pengalaman pengguna. Contoh di atas hanyalah salah satu daripadanya. Malah, terdapat lebih banyak senario aplikasi untuk kelas pseudo dan unsur pseudo, yang memerlukan penerokaan dan amalan berterusan kami dalam pembangunan sebenar.

Atas ialah kandungan terperinci Terokai konsep asas dan senario penggunaan kelas pseudo CSS dan elemen pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!