:focus vs :active: Bilakah Anda Harus Menggunakan Setiap Satu?

:fokus vs :aktif: Membongkar Perbezaan

Kelas Pseudo memainkan peranan penting dalam penggayaan CSS, membolehkan anda menggunakan gaya untuk elemen berdasarkan keadaan atau interaksi mereka dengan pengguna. Dua kelas pseudo yang biasa digunakan ialah :fokus dan :aktif, yang sering menyebabkan kekeliruan disebabkan kefungsian bertindihnya.

Pemahaman :fokus

Kelas pseudo :focus mewakili elemen yang mempunyai menerima fokus, biasanya melalui navigasi papan kekunci atau klik. Apabila elemen mempunyai fokus, ia menunjukkan bahawa ia sudah bersedia untuk menerima input pengguna, seperti menaip atau interaksi.

Pemahaman :aktif

Kelas pseudo :aktif mewakili elemen yang pada masa ini sedang diaktifkan oleh pengguna. Ini boleh berlaku melalui tindakan seperti mengklik, menekan kekunci atau menyeret. Keadaan :aktif biasanya menandakan bahawa elemen sedang berinteraksi dan penggayaan selalunya mencerminkan tindakan atau peningkatan visual.

Perbezaan Utama

Walaupun :focus dan :active mungkin kelihatan serupa, terdapat ialah perbezaan utama:

• Masa: :fokus digunakan apabila elemen menerima fokus, manakala :aktif digunakan semasa interaksi aktif.
• Tujuan: :fokus menunjukkan elemen sedia untuk input, manakala :aktif menandakan elemen sedang digunakan.
• Biasanya digunakan bersama: Mengklik elemen biasanya menghasilkan kedua-dua :fokus dan :keadaan aktif menjadi digunakan.

Contoh Ilustrasi

Pertimbangkan kod berikut:

button {
  font-weight: normal;
  color: black;
}
button:focus {
  color: red;
}
button:active {
  font-weight: bold;
}

Dengan penggayaan ini, satu pada mulanya muncul dengan teks hitam dan berat normal. Apabila ia menerima fokus melalui tab, teks menjadi merah. Walau bagaimanapun, apabila butang diklik (mengaktifkannya), teks kekal merah dan berat menjadi tebal.

Contoh ini menunjukkan cara :focus dan :active boleh digunakan secara berasingan atau digabungkan untuk menggayakan elemen semasa keadaan berbeza . Memahami perbezaan mereka membolehkan anda membuat helaian gaya yang tepat dan intuitif yang meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci :focus vs :active: Bilakah Anda Harus Menggunakan Setiap Satu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!