Apakah Perbezaan Antara Kelas Pseudo :focus dan :aktif CSS?

Perbezaan Antara :focus dan :active Pseudo-Classes

Memahami perbezaan antara :focus dan :active states adalah penting apabila bekerja dengan CSS. Kelas pseudo ini mewakili keadaan elemen berbeza yang dimainkan apabila berinteraksi dengan elemen HTML.

Apakah itu :focus?

Keadaan :focus menunjukkan bahawa elemen mempunyai menerima fokus input. Keadaan ini biasanya dicetuskan apabila elemen menerima input papan kekunci atau apabila pengguna memilihnya menggunakan mekanisme boleh fokus yang lain. Elemen seperti elemen bentuk (:input, :button, :a), frame/:iframe berkelakuan begini.

Apakah itu :active?

Keadaan :active mewakili elemen yang sedang diaktifkan oleh pengguna. Keadaan ini adalah perkara biasa dalam senario interaktif, seperti apabila pengguna mengklik butang atau menekan kekunci. Sebagai contoh, butang biasanya memasuki keadaan :aktif apabila diklik dan dilepaskan.

Cara Membezakan :focus dan :active

Walaupun kelihatan serupa apabila elemen diklik, :focus dan :active ialah keadaan yang berbeza. Apabila pengguna mengklik pada elemen, ia menerima fokus dan pengaktifan, menghasilkan keadaan :focus:aktif. Walau bagaimanapun, negeri-negeri ini boleh dicetuskan secara bebas. Contohnya, elemen boleh difokuskan tanpa pengaktifan (cth., menggunakan tab) dan sebaliknya.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

Apabila anda memfokus pada butang (menggunakan tab) tanpa mengkliknya, teks hanya akan bertukar merah. Apabila anda mengklik butang, teks akan bertukar menjadi merah dan tebal, menunjukkan bahawa butang itu difokuskan dan diaktifkan.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Kelas Pseudo :focus dan :aktif CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!