Apakah fungsi dan perbezaan antara unsur pseudo dan kelas pseudo?

Unsur pseudo dan kelas pseudo ialah dua konsep penting dalam CSS, dan ia memainkan peranan yang sangat penting dalam reka bentuk web. Artikel ini akan memperkenalkan secara terperinci perbezaan dan fungsi unsur pseudo dan kelas pseudo, serta memberikan contoh kod khusus.

1. Elemen Pseudo
Unsur Pseudo ialah cara untuk mencipta elemen secara maya dalam dokumen. Unsur pseudo diwakili oleh titik bertindih berganda (::). Kandungan unsur pseudo boleh ditetapkan melalui atribut kandungan.

1. Contoh kod:
   

   <style>
       p::before {
           content: "前方的虚拟元素";
           color: red;
       }
   </style>
   <p>这是正常的段落。</p>

Dengan kod di atas, teks merah "Elemen Dummy di Depan" akan disisipkan sebelum elemen perenggan.

::elemen pseudo:

::elemen pseudo digunakan untuk mencipta elemen maya di belakang elemen yang dipilih Anda juga boleh menggunakan atribut kandungan untuk menetapkan kandungan elemen pseudo.

2. Contoh kod:
   

   <style>
       p::after {
           content: "后方的虚拟元素";
           color: blue;
       }
   </style>
   <p>这是正常的段落。</p>

Dengan kod di atas, teks biru "elemen dummy belakang" akan disisipkan selepas elemen perenggan.

2. Pseudo-class

Pseudo-class digunakan untuk memilih keadaan berubah bagi elemen tertentu, atau untuk memilih elemen pada kedudukan tertentu. Kelas pseudo diwakili oleh satu titik bertindih (:). .

Kod Contoh:

<style>
    a:hover {
        color: red;
    }
</style>
<a href="#">鼠标悬停时变为红色</a>

Kod di atas akan menetapkan warna fon kepada merah apabila tetikus melayang di atas pautan.

1. 
   :kelas pseudo aktif:
:kelas pseudo aktif digunakan untuk memilih keadaan di mana elemen itu diaktifkan, biasanya apabila tetikus ditekan pada elemen tetapi tidak dilepaskan.

Contoh kod:

<style>
    button:active {
        background-color: blue;
    }
</style>
<button>按钮</button>

Kod di atas akan menetapkan warna latar belakang kepada biru apabila butang ditekan tetapi tidak dilepaskan.

2. 
   :nth-child pseudo-class:
:nth-child pseudo-class digunakan untuk memilih elemen anak yang ditentukan bagi sesuatu elemen.

Kod Contoh:

<style>
    li:nth-child(2) {
        color: red;
    }
</style>
<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
</ul>

Kod di atas akan memilih elemen li kedua dalam senarai dan menetapkan warna teksnya kepada merah.

3. Ringkasan:
   Unsur pseudo dan kelas pseudo memainkan peranan penting dalam CSS. Elemen pseudo digunakan untuk mencipta elemen maya sebelum dan selepas elemen yang dipilih, manakala kelas pseudo digunakan untuk memilih keadaan atau kedudukan elemen tertentu. Melalui penggunaan fleksibel elemen pseudo dan kelas pseudo, kami boleh mengawal gaya halaman web dengan lebih banyak dan halus.

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