Apakah kelas pseudo CSS dan bagaimana menggunakannya?

CSS Pseudo-Classes adalah kata kunci yang digunakan untuk menentukan keadaan elemen khas. Mereka boleh menggunakan gaya secara dinamik berdasarkan interaksi pengguna atau lokasi dokumen; 1.: Hover mencetuskan apabila tetikus dilegakan, seperti butang: Hover mengubah warna butang; 2.: Fokus berkuat kuasa apabila elemen mendapat tumpuan, meningkatkan kebolehcapaian bentuk; 3 .: Nth-Child () memilih unsur-unsur dengan kedudukan, menyokong ganjil, walaupun atau formula seperti 2n 1; 4 .: Anak pertama dan: Kanak-kanak terakhir pilih elemen kanak-kanak pertama dan terakhir; 5 .: Tidak () tidak termasuk unsur -unsur yang sepadan dengan keadaan yang ditentukan; 6.: Dikunjungi dan: gaya set pautan mengikut status akses pautan, tetapi: dikunjungi adalah tertakluk kepada sekatan privasi; Kelas pseudo bermula dengan kolon dan boleh digunakan dalam rantai seperti: hover: fokus, dan mesti mengikuti perintah LVHA untuk memastikan sarung yang betul. Mereka tidak memerlukan definisi HTML dan secara automatik digunakan oleh penyemak imbas, yang dapat mengurangkan kebergantungan JavaScript dan meningkatkan interaktiviti dan aksesibilitas.

CSS Pseudo-Classes adalah kata kunci yang ditambah kepada pemilih yang menentukan keadaan khas elemen yang dipilih. Mereka membolehkan anda untuk elemen gaya berdasarkan interaksi pengguna, kedudukan elemen dalam dokumen, atau keadaan lain yang tidak dapat dilihat dalam struktur HTML itu sendiri.

Tidak seperti kelas biasa, kelas pseudo tidak perlu ditakrifkan dalam HTML-mereka digunakan secara automatik oleh penyemak imbas apabila syarat-syarat tertentu dipenuhi.

Kes penggunaan biasa dan contoh

Kelas pseudo amat berguna untuk meningkatkan pengalaman pengguna melalui gaya dinamik tanpa JavaScript.

: hover - gaya pada tetikus

Salah satu kelas pseudo yang paling banyak digunakan. Ia menggunakan gaya apabila pengguna melayang ke atas elemen.

 butang: hover {
  latar belakang warna: biru;
  Warna: Putih;
}

Ini menjadikan butang berubah warna apabila penunjuk tetikus berada di atasnya.

: fokus - gaya apabila elemen difokuskan

Berguna untuk kebolehcapaian dan interaksi bentuk. Ia mensasarkan unsur -unsur yang menerima fokus, seperti input atau pautan.

 Input: Fokus {
  Border-color: Hijau;
  Garis besar: 2px pepejal kuning;
}

Ini membantu pengguna melihat medan input mana yang sedang aktif.

: nth-anak ()-elemen sasaran mengikut kedudukan

Pilih elemen berdasarkan kedudukan mereka dalam bekas induk.

 li: nth-child (ganjil) {
  latar belakang warna: #f0f0f0;
}

Gaya ini setiap item senarai ganjil dengan latar belakang kelabu muda. Anda juga boleh menggunakan formula seperti 2n 1 untuk lebih banyak kawalan.

Variasi lain:

• :nth-child(even) -walaupun kedudukan
• :nth-child(3) -Anak Ketiga
• :nth-child(3n) -Setiap anak ketiga

: anak pertama dan: anak terakhir

Sasarkan elemen pertama atau terakhir di kalangan adik -beradik.

 P: anak pertama {
  Font-Weight: Bold;
}

P: anak terakhir {
  warna: kelabu;
}

: tidak () - tidak termasuk elemen yang sepadan dengan keadaan

Penafian pseudo-kelas. Memohon gaya untuk elemen yang tidak sepadan dengan pemilih yang diberikan.

 Div: tidak (.special) {
  Kelegapan: 0.8;
}

Ini mengurangkan kelegapan semua div s kecuali mereka yang mempunyai kelas special .

: dikunjungi dan: pautan - pautan gaya berdasarkan sejarah

Tag anchor gaya bergantung kepada sama ada mereka telah dikunjungi:

 A: pautan {
  Warna: Biru;
}

A: dikunjungi {
  Warna: ungu;
}

Nota: Atas sebab privasi, gaya yang dibenarkan pada :visited adalah terhad (misalnya, anda tidak boleh menukar display atau position ).

Cara menggunakan kelas pseudo

Sintaks adalah mudah:

 pemilih: kelas pseudo {
  Harta: Nilai;
}

Anda juga boleh mengikat kelas pseudo:

 A: Hover: Fokus {
  Teks-penyerapan: garis bawah;
}

Ini hanya terpakai apabila pautan itu berlegar dan fokus.

Perkara utama untuk diingat

• Kelas pseudo bermula dengan kolon ( : .
• Mereka dinamik - digunakan berdasarkan tingkah laku pengguna atau keadaan dokumen.
• Sesetengah kelas pseudo seperti :hover hanya berfungsi dengan unsur-unsur interaktif kecuali tabindex ditambah.
• Perintah perkara dalam beberapa kes. Untuk pautan, ikuti peraturan LVHA :
  :link , :visited , :hover , :active - untuk memastikan cascade yang betul.

Pemikiran terakhir

Pseudo-Classes adalah alat yang berkuasa untuk mewujudkan reka bentuk yang responsif, interaktif dengan CSS tulen. Mereka mengurangkan keperluan untuk JavaScript dalam banyak corak UI biasa dan meningkatkan kebolehcapaian apabila digunakan dengan bijak.

Pada asasnya, mereka membiarkan anda menjawab soalan seperti:

• Adakah pengguna melayang butang ini?
• Adakah ini item pertama dalam senarai?
• Adakah pautan ini telah dikunjungi?

Sebaik sahaja anda memahami bagaimana mereka bekerja, anda akan mendapati diri anda menggunakannya dalam hampir setiap projek.

Atas ialah kandungan terperinci Apakah kelas pseudo CSS dan bagaimana menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!