: sasaran - Trik CSS | CSS Almanac 2025

The :targetpemilih pseudo dalam CSS perlawanan apabila hash di URL dan id unsur adalah sama. Contohnya, jika URL semasa adalah:

https://css-tricks.com/#voters

Dan ini wujud dalam HTML:

 Content

Pemilih ini akan sesuai:

:target ( background: yellow; )

Dan sectionelemen itu akan mempunyai latar belakang kuning.

Dengan generik pemilih (mencocokkan apa sahaja yang menjadi sasaran), jika URL berubah menjadi berakhir #faqdan ada elemen lain dengan ID faq, pemilih itu akan sesuai lagi dan #faqelemen akan memiliki latar belakang kuning.

Anda boleh mengehadkannya dengan menentukan elemen mana yang ingin anda sasarkan, seperti

#voters:target ( )

Bilakah anda akan menggunakan ini?

Satu kemungkinan adalah apabila anda mahukan gaya dengan "keadaan". Apabila halaman mempunyai hash tertentu, ia berada dalam keadaan tersebut. Ia tidak serba boleh dengan memanipulasi nama kelas (kerana hanya ada satu dan hanya boleh dikaitkan dengan satu elemen) tetapi serupa. Apa sahaja yang anda boleh lakukan mengubah kelas untuk mengubah keadaan yang boleh anda lakukan semasa elemen masuk :target. Contohnya: ubah warna, ubah kedudukan, ubah gambar, sembunyikan / tunjukkan perkara, apa sahaja.

Saya akan menggunakan peraturan praktik ini untuk kapan :targetpilihan yang baik:

Apabila "keadaan" diperlukan
Apabila tingkah laku jump-down / hash-link dapat diterima
Bila boleh mempengaruhi sejarah penyemak imbas

Bagaimana anda mendapatkan hash dalam URL?

Cara yang paling biasa adalah dengan pengguna mengklik pautan yang merangkumi hash. Boleh jadi pautan dalaman (halaman yang sama) atau URL yang memenuhi syarat sepenuhnya yang berakhir dengan hash dan nilai. Contoh:

Go To There Go To There

Kelakuan Melompat

Tidak kira sama ada pautan halaman yang sama atau tidak, tingkah laku penyemak imbas adalah menatal halaman sehingga elemen itu berada di bahagian atas halaman . Atau, sejauh mungkin jika tidak dapat menatal sejauh itu. Perkara ini agak penting untuk diketahui, kerana ini bermaksud mengeksploitasi tingkah laku "dinyatakan" ini agak rumit / terhad.

Sebagai contoh, saya pernah mencuba pelbagai teknik untuk meniru tab CSS yang berfungsi, tetapi akhirnya memutuskan untuk menggunakan peretasan kotak centang adalah idea yang lebih baik kerana mengelakkan masalah melompat halaman. Ian Hansson di CSS Science juga mempunyai beberapa contoh tab. Contoh ketiganya menggunakan :target, dan meletakkan elemen yang benar-benar tersembunyi di atas bahagian atas halaman untuk mengelakkan tingkah laku melompat halaman. Ia pintar, tetapi penyelesaian yang sempurna secara keseluruhan, kerana itu bermaksud halaman akan melonjak ke atas sekiranya tab lebih rendah di halaman.

Maklumat lanjut

Artikel di sini mengenai CSS-Tricks: On: target
Spesifikasi Pemilih Tahap 4
Galeri gambar ringkas yang menggunakan: target (menderita lompatan halaman, contoh yang baik) oleh Chris Heilmann
Demo teknik pudar kuning (walaupun untuk kandungan yang ada, bukan kandungan yang baru ditambahkan) dari Web Designer Notebook.
Sasaran CSS, secara harfiah, oleh Caleb Ogden.
CSS: sasaran untuk reka bentuk di luar skrin
Dokumen MDN