Menghuraikan kegunaan biasa dan contoh kelas pseudo CSS dan elemen pseudo

Terokai penggunaan biasa dan analisis contoh kelas pseudo CSS dan elemen pseudo

Dalam pembangunan bahagian hadapan, CSS ialah salah satu bahasa reka bentuk gaya yang biasa kami gunakan. Selain pemilih dan atribut asas, CSS juga menyediakan beberapa pemilih khas yang dipanggil kelas pseudo dan elemen pseudo. Artikel ini akan menyelidiki penggunaan biasa dan analisis contoh kelas pseudo CSS dan elemen pseudo, serta melampirkan contoh kod khusus.

1. Penggunaan biasa dan contoh analisis kelas pseudo

1. :legar pseudo-class

:legar pseudo-class digunakan untuk kesan tuding tetikus dan anda boleh menetapkan gaya led tetikus pada elemen. Sebagai contoh, kita boleh mencipta kesan dinamik butang mudah. Contoh kod adalah seperti berikut:

<style>
   .btn {
      padding: 10px 20px;
      background-color: #ccc;
      color: #fff;
   }
   .btn:hover {
      background-color: #f00;
   }
</style>
<button class="btn">悬停按钮</button>

Dalam contoh ini, warna latar belakang butang akan bertukar merah semasa tuding.

2. :kelas pseudo aktif

:kelas pseudo aktif digunakan untuk menetapkan gaya apabila elemen diaktifkan (diklik). Sebagai contoh, kita boleh mencipta kesan klik butang mudah. Contoh kod adalah seperti berikut:

<style>
   .btn {
      padding: 10px 20px;
      background-color: #ccc;
      color: #fff;
   }
   .btn:active {
      background-color: #f00;
   }
</style>
<button class="btn">点击按钮</button>

Dalam contoh ini, warna latar belakang butang akan bertukar merah apabila diklik.

3. :nth-child pseudo-class

:nth-child pseudo-class digunakan untuk memilih elemen anak pada kedudukan tertentu di bawah elemen induk. Sebagai contoh, kita boleh menetapkan warna latar belakang yang berbeza untuk baris ganjil dan genap dalam senarai. Contoh kod adalah seperti berikut:

<style>
   li:nth-child(odd) {
      background-color: #ccc;
   }
   li:nth-child(even) {
      background-color: #f00;
   }
</style>
<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   <li>列表项4</li>
</ul>

Dalam contoh ini, warna latar belakang baris ganjil dalam senarai adalah kelabu dan warna latar belakang baris genap ialah merah.

2. Analisis kegunaan biasa dan contoh unsur-unsur pseudo ia. Sebagai contoh, kita boleh menambah teg di hadapan perenggan dan menetapkan gaya untuknya. Contoh kod adalah seperti berikut:

<style>
   p::before {
      content: "前面插入的元素";
      background-color: #ccc;
   }
</style>
<p>段落内容</p>

Dalam contoh ini, warna latar belakang kelabu akan muncul di hadapan perenggan dan teks "Elemen yang dimasukkan sebelum ini" akan dipaparkan.

::selepas unsur pseudo

::selepas unsur pseudo digunakan untuk memasukkan unsur selepas kandungan unsur dan menetapkan gaya untuknya. Sebagai contoh, kita boleh menambah teg selepas perenggan dan menetapkan gaya untuknya. Contoh kod adalah seperti berikut:

<style>
   p::after {
      content: "后面插入的元素";
      background-color: #ccc;
   }
</style>
<p>段落内容</p>

Dalam contoh ini, warna latar belakang kelabu akan muncul selepas perenggan dan teks "Elemen disisipkan selepas" akan dipaparkan.

::elemen pseudo huruf pertama

::elemen pseudo huruf pertama digunakan untuk memilih huruf pertama unsur dan menetapkan gaya untuknya. Sebagai contoh, kita boleh menetapkan gaya khas untuk huruf pertama perenggan. Contoh kod adalah seperti berikut:

<style>
   p::first-letter {
      font-size: 24px;
      color: #f00;
   }
</style>
<p>首字母大写的段落内容</p>

Dalam contoh ini, huruf pertama perenggan akan bertukar merah dan membesar kepada saiz fon 24px.
3. Artikel ini meneroka secara mendalam penggunaan biasa dan analisis contoh kelas pseudo dan elemen pseudo dalam CSS dan melampirkan contoh kod khusus. Dengan menggunakan kelas pseudo dan elemen pseudo secara rasional, kami boleh mengawal gaya halaman dengan lebih fleksibel dan mencapai kesan interaktif dan kesan visual yang lebih kaya. Saya harap artikel ini dapat membantu kerja pembangunan bahagian hadapan semua orang.

Atas ialah kandungan terperinci Menghuraikan kegunaan biasa dan contoh kelas pseudo CSS dan elemen pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!