Seperti yang anda ketahui, terdapat tiga kelas pseudo yang sama dalam CSS, iaitu fokus ,: fokus-kelihatan, dan: fokus.
Pada pandangan pertama, seseorang mungkin keliru tentang perbezaan antara ini dan bila menggunakan yang mana. Berita baiknya ialah: ketiga-tiga kelas pseudo ini sangat mudah difahami dan dibezakan antara satu sama lain.Dalam artikel ini, kita akan memahami apa sebenarnya: fokus ,: fokus-kelihatan, dan: fokus-dengan-fokus, dan kapan dan bagaimana menggunakan setiap kelas pseudo ini.
Bacaan Lanjut:
Sekiranya anda memerlukan penyegaran di kelas pseudo, lepaskan kelas pseudo CSS, dalam kursus CSS kami.
: fokus kelas pseudo terpakai kepada elemen apabila ia fokus .
Fokus ini boleh dibuat menggunakan tetikus (apabila kita mengklik pada elemen), papan kekunci (ketika kita menavigasi ke tab dengan menekan), atau program yang mendasari (ketika kita menggunakan JavaScript).
Bacaan Lanjut:
Anda boleh meneroka: fokus pseudo-kelas secara terperinci dalam kelas pseudo CSS :: fokus.
unsur -unsur yang fokus dibenarkan untuk menerima fokus dan, oleh itu, menjadi subjek: fokus. Ini biasanya unsur -unsur interaktif dalam html - seperti & lt; input & gt;, & lt; textarea & gt;, & lt; butang & gt;, dan sebagainya.
? Notis : unsur-unsur yang tidak interaktif seperti & lt; p & gt;, & lt; h1 & gt;, & lt; blockquote & gt;, & lt; code & gt;, dan lain-lain, tidak fokus dan oleh itu tidak boleh menjadi subjek: fokus. Hanya jika kita secara eksplisit membuat mereka fokus, dengan menetapkan atribut tabIndex pada mereka, yang kita boleh harapkan: fokus untuk memohon kepada mereka.
Kembali ke: Fokus, kelas pseudo ini digunakan untuk memilih dan, selepas itu, gunakan gaya untuk unsur-unsur apabila mereka berada dalam keadaan fokus.Mungkin, contoh yang paling naif untuk berbuat demikian adalah untuk mempertimbangkan medan input seperti yang ditunjukkan di bawah:
<label> <span>Name</span> <input type="text" name="name"> </label>
ketika kita mengklik pada medan input, ia menerima tumpuan dan, akibatnya, penyemak imbas menggunakan garis besar hitam kepadanya, seperti yang digambarkan di bawah:
Ini membantu kita melihat input mana yang kita ada dalam bentuk banyak medan input.
untuk lebih menghargai manfaat ini, bayangkan sebaliknya. Katakan kita klik pada medan input dan tidak mempunyai gaya khas yang digunakan untuk medan seperti yang kita lakukan.
Apa pendapat anda, adakah kita mungkin untuk menentukan input mana yang kita ada sekarang? Perkara yang ideal dalam merancang antara muka pengguna dalam apa jua bentuk adalah untuk
'membuat segala -galanya semudah mungkin.' -class.Inti:
: Fokus pseudo-kelas (walaupun dua lagi kelas pseudo fokus) membantu kamimeningkatkan kebolehcapaian
laman web.Dengan jelas berkomunikasi dengan pengguna secara visual tentang di mana dia berada di laman web, kami menjadikannya cukup mudah baginya untuk berinteraksi dengan laman web dan mendapatkan karyanya dilakukan tanpa sebarang kekeliruan.
dengan kata lain ,: fokus lebih penting daripada kelas pseudo daripada yang kita fikirkan.Tetapi bukan satu-satunya kelas pseudo berasaskan fokus; Kami mempunyai
: Focus-Visible
juga.Masalah dengan: fokus
<label> <span>Name</span> <input type="text" name="name"> </label>
<button>A button</button>
Tetapi tunggu sebentar? Adakah keinginan kita yang diinginkan? 
berkata cara lain: Adakah keputusan bijak untuk mempamerkan garis besar apabila kita mengklik butang menggunakan tetikus? kerana ternyata, tidak, itu tidak!
mari kita faham mengapa ...Apabila kita mengklik butang - atau mana -mana elemen interaktif, secara umum, yang dimaksudkan untuk melakukan tindakan
, misalnya. Pautan - kita sudah tahu di mana kita berada di laman web. Jelas sekali, kerana kami mengklik secara sedar pada butang, kami pastinya tidak dapat dikelirukan tentang elemen mana yang ada pada halaman web yang kini mempunyai tumpuan - kami dengan jelas tahu bahawa ia adalah butang yang kami klik yang mempunyai fokus pada masa ini.Dalam hal ini, ia tidak masuk akal, jika sama sekali, untuk menekankan butang secara visual untuk menjadi elemen yang sedang difokuskan.
Tetapi mengapa ini masuk akal untuk medan input?
soalan yang baik. Anda betul -betul dalam pemerhatian anda bahawa: Fokus berfungsi dengan baik apabila kami menggunakannya pada medan input dan ada alasan yang mudah untuknya. Apabila kita mengklik pada medan input menggunakan tetikus, pekerjaan
kami tidak selesai ; Kami masih perlu memasukkan data ke dalam bidang.
Dan kerana kerja kita belum selesai, kita dengan cepat dan jelas perlu mengetahui input mana yang sedang aktif.yang paling penting melihat perbezaan yang penting, namun halus, antara medan input dan butang (dan unsur -unsur interaktif yang sedemikian seperti):
tetapi perlu diingat bahawa penalaran ini hanya terpakai apabila kita berinteraksi dengan unsur -unsur ini menggunakan tetikus.
Apa yang berlaku apabila kita beralih ke papan kekunci?
mari kita cari ...
sama baiknya .
Malah, jika laman web dibina dengan cara ini untuk hanya menghiburkan interaksi tetikus, ia sangat tidak boleh diakses.Bayangkan seseorang memecahkan peranti tetikus mereka dan kini ingin mempersiapkan peperiksaan mereka, dan tidak ada cara untuk memerintahkan yang lain pada masa ini. Kes terburuk adalah jika orang itu mahu menyediakan dari laman web yang dibina hanya sekitar interaksi tetikus.
Sebagai pemaju CSS, kita mesti mengakui laman web fakta dan reka bentuk ini untuk diakses tanpa tetikus seperti itu. Dalam hal ini, kita mesti pastikan untuk memberikan penekanan visual yang diperlukan pada unsur -unsur interaktif apabila mereka menerima fokus.
dan ini kini termasuk butang juga.
mari kita nyatakan ini lagi.Apabila kita menggunakan tetikus untuk berinteraksi dengan laman web, mewujudkan penekanan visual untuk butang (dan unsur -unsur yang serupa) dalam keadaan fokus mereka tidak diperlukan; Malah, ia tidak diingini seperti yang kita lihat di atas. Ini kerana pengguna sudah tahu bahawa selepas mengklik butang, ia adalah yang menjadi fokus.
tetapi apabila kita menggunakan papan kekunci sebaliknya,
mencipta penekanan visual adalah sangat diperlukan . Ini kerana, sekarang, pengguna tidak menyedari elemen interaktif yang fokus. Kami perlu untuk mempamerkan secara visual ini.
Masalahnya ialah kita tidak boleh menggunakan: fokus untuk kebimbangan gaya ini kerana ...baik ... ia terpakai kepada butang walaupun kita berinteraksi dengan mereka menggunakan tetikus.
Sekarang apa?
tidak perlu risau, kerana kita mempunyai: fokus-kelihatan untuk menyelamatkan!
'penamaan' ). Kemungkinan besar bahawa makna terletak pada nama itu sendiri.
Mengikuti ini, jika kita menganalisis nama: fokus-kelihatan, ia jelas mempunyai kaitan dengan'fokus' tetapi juga ada kaitan dengan 'kelihatan' .
bolehkah anda memikirkan hanya dengan nama apa maksud kelas pseudo ini?
well ,: fokus-kelihatan terpakai kepada elemen yang fokus dan fokus yang perlu dilihat (idealnya). Secara padat, kita juga boleh mengatakan bahawa: fokus-kelihatan terpakai kepada elemen yang sepatutnya mempunyai fokus yang kelihatan .
: fokus-kelihatan hanya muncul apabila kita membawa elemen dalam fokus menggunakan papan kekunci, atau beberapa interaksi bukan tikus lain (mis. Menggunakan JavaScript).
yang paling penting-dan ini benar-benar penting-: fokus-kelihatan tidak terpakai kepada butang (dan unsur-unsur seperti itu) apabila mereka menerima tumpuan berdasarkan interaksi tetikus .
Dengan ini, mari kita kembali ke butang & lt; Contoh di atas dan gantikan: Peraturan fokus dengan: fokus-kelihatan supaya garis besar hanya dibentangkan apabila butang menerima fokus melalui papan kekunci:
<label> <span>Name</span> <input type="text" name="name"> </label>
Contoh Live
inilah yang kita dapat apabila kita mengklik butang (menggunakan tetikus):
: fokus-kelihatan pada dasarnya adalah situasi menang-menang dalam (a) kita tidak menggunakan gaya apabila butang diklik, dan oleh itu fokus, menggunakan tetikus dan (b) kita memastikan laman web kami tetap dapat diakses Apabila menggunakan papan kekunci dengan gaya fokus yang diperlukan pada butang. 
: Focus-visible adalah wira! (Tetapi saya tidak tahu nama filem!)
Bagaimana dengan: fokus-fokus? Jelas sekali, kita tidak dapat menamatkan artikel ini tanpa pergi lebih kurang berguna
: fokus-fokusingat untuk membaca nama dengan teliti ), terpakai kepada elemen yang mempunyai fokus di dalamnya
.dengan kata lain, mana-mana elemen yang mengandungi elemen keturunan yang sepadan: fokus, atau sepadan dengan dirinya sendiri: fokus, adalah calon untuk: fokus-fokus. berikut adalah contoh:
Kami mempunyai butang yang terkandung di dalam & lt; div & gt;. Matlamat kami adalah untuk gaya & lt; div & gt; Khususnya apabila butangnya fokus. CSS berikut menyelesaikannya:
<button>A button</button>
ketika butang menerima fokus, & lt; div & gt; mendapat warna latar merah jambu.
cukup asas.
? Notis : Perlu diingat bahawa: fokus-dengan-berkelakuan tepat seperti: Fokus kerana ia juga muncul pada interaksi tetikus pada butang, sebagai contoh. Ia tidak mempamerkan tingkah laku yang serupa dengan: fokus-kelihatan.
Sekarang anda mungkin mencari contoh yang lebih praktikal: fokus-fokus dan itulah yang saya ada seterusnya untuk anda.
seperti yang dinyatakan sebelum ini,: fokus-fokus tidak biasa digunakan dalam CSS tetapi beberapa kes sedemikian rupa sehingga mereka dapat diselesaikan dengan cukup elegan menggunakan: fokus-dengan-fokus. Baca terus untuk mengetahui tentang kes tersebut.
Katakan kami mempunyai bar aksesibiliti di laman web yang hanya muncul apabila menggunakan navigasi papan kekunci. Pada mulanya, ia tersembunyi tetapi hanya secara visual; iaitu, mungkin untuk tab ke salah satu butang di dalam bar ini.
? NOTIS : 'Tersembunyi hanya secara visual' bermaksud bahawa elemen itu tidak mempunyai paparan: Tiada atau penglihatan: Tersembunyi ditetapkan di atasnya untuk sebenarnya menyembunyikannya. Sebagai contoh, kelegapan: 0 menyembunyikan elemen hanya secara visual.
Sekarang, saat mana -mana butang dalam bar kebolehaksesan ini menjadi tumpuan, ia diperlukan untuk mempamerkan bar ini kepada pengguna.
Tetapi bagaimana untuk memilih bar aksesibiliti apabila salah satu butangnya mempunyai tumpuan? > adalah borang pendek untuk 'aksesibiliti' ), pemilih yang dikehendaki ialah .a11y-bar: fokus-dengan. .a11y-bar: fokus-fokus memilih bar .a11y apabila fokus berada di dalamnya, yang betul-betul kita perlukan.
kerja yang baik!
Pautan di bawah menunjukkan contoh ini: Contoh Live
Bacaan lanjut
Walaupun kami telah merangkumi hampir semua perkara yang perlu kita ketahui tentang: fokus ,: fokus-kelihatan, dan: fokus-fokus, masih ada nilai dalam membaca lebih lanjut dari beberapa sumber seperti yang disebutkan di bawah:
Memahami Kriteria Kejayaan 2.4.7: Fokus Terlihat | Wai | W3C
Atas ialah kandungan terperinci Apakah perbezaan antara: fokus ,: fokus-kelihatan, dan: fokus-fokus dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
