(disesuaikan daripada "HTML5 & CSS3 untuk Dunia Nyata" oleh Alexis Goldstein, Louis Lazaris dan Estelle Weyl)

mata teras

CSS Pseudo-Class digunakan untuk menentukan keadaan khas elemen, termasuk struktur, operasi pengguna, input dan kelas pseudo negatif. Mereka boleh gaya elemen berdasarkan lokasi elemen dalam pokok dokumen, interaksi pengguna, bentuk elemen bentuk, atau unsur -unsur yang tidak sepadan dengan pemilih tertentu.

Beberapa kelas pseudo mungkin mempunyai masalah keselamatan, seperti

kelas pseudo, yang boleh digunakan oleh penyerang untuk memeriksa sejarah pelayaran pengguna. Pelayar moden mengehadkan gaya yang boleh digunakan untuk :visited untuk mengelakkan masalah ini. Untuk meningkatkan kebolehcapaian, disyorkan untuk menambah :visited di mana :hover dimasukkan, kerana tidak semua pelawat menggunakan tetikus untuk melayari laman web. :focus

Walaupun kebanyakan pelayar moden menyokong semua kelas pseudo CSS, beberapa pelayar yang lebih tua mungkin tidak menyokong kelas pseudo tertentu, seperti

dan :nth-child(). Perpustakaan JavaScript seperti Selectivizr boleh digunakan untuk mencari kelas pseudo ini dalam pelayar yang tidak mempunyai sokongan seperti Internet Explorer. :nth-last-child()

CSS Pseudo-Class

Anda mungkin sudah biasa dengan beberapa kelas pseudo interaksi pengguna, iaitu

, :link, :visited, :hover, :active dan :focus.

Petua Penting: Titik Utama

:visited kelas pseudo mungkin mempunyai masalah keselamatan, jadi penyemak imbas tidak menyokong penggunaan semua sifat CSS pada pautan yang dikunjungi. Tanpa sekatan ini, laman web yang berniat jahat boleh menyemak sama ada pengguna telah melawat laman web atau bank yang popular untuk gaya pautan yang dikunjungi (contohnya, imej latar belakang yang unik untuk setiap aplikasi pautan yang dikunjungi). Ini membolehkan penyerang melihat sejarah pelayaran pengguna tanpa kebenaran. Oleh itu, pelayar moden mengehadkan gaya yang boleh digunakan untuk :visited. Spesifikasi secara eksplisit membolehkan perubahan ini, menyatakan bahawa ejen pengguna (UAS) dapat merawat semua pautan sebagai pautan yang tidak dicapai, atau melaksanakan langkah -langkah lain untuk melindungi privasi pengguna sambil membentangkan cara yang berbeza dari pautan yang diakses dan tidak dicapai. Untuk meningkatkan kebolehcapaian, tambah :hover di mana :focus dimasukkan, kerana tidak semua pelawat menggunakan tetikus untuk melayari laman web anda. :hover boleh digunakan untuk mana -mana elemen pada halaman, bukan hanya pautan dan kawalan bentuk. :focus dan :active berkaitan dengan pautan, kawalan bentuk, elemen kandungan yang boleh diedit, dan mana -mana elemen dengan atribut tabindex.

Walaupun anda mungkin telah menggunakan kelas pseudo asas ini untuk seketika, terdapat banyak kelas pseudo lain yang tersedia. Sebahagian daripada kelas pseudo ini telah berada di sekitar spesifikasi selama bertahun-tahun, tetapi tidak disokong (atau umumnya difahami) sehingga pelayar mula menyokong sifat bentuk HTML5 baru yang menjadikannya lebih relevan. Unsur-unsur yang sesuai dengan kelas pseudo berikut berdasarkan atribut, interaksi pengguna, dan status kawalan bentuk:

• :enabled: Elemen antara muka pengguna yang diaktifkan, pada dasarnya sebarang kawalan bentuk yang menyokong atribut disabled tetapi tidak menggunakan atribut itu pada masa ini.
• :disabled: Sebaliknya, elemen antara muka pengguna yang dilumpuhkan: sebarang kawalan borang yang menyokong atribut disabled dan kini mempunyai atribut yang digunakan.
• :checked: butang radio atau kotak semak yang telah dipilih atau diperiksa.
• :indeterminate: Unsur bentuk yang tidak dipilih atau tidak dipilih. Contohnya, jika anda menyemak kotak semak Pilih Semua untuk memilih satu set kotak semak dan kemudian tidak memilih beberapa tetapi tidak semua kotak semak dalam kumpulan, anda boleh menetapkan Pilih semua ke keadaan yang tidak pasti (menggunakan JavaScript) untuk menunjukkan bahawa ia bukan dipilih atau tidak terkawal.
• :target: Pemilih ini memilih elemen sasaran titik utama di halaman yang aktif sekarang. Ini kedengaran lebih rumit daripada yang sebenarnya: anda sudah tahu bahawa anda boleh membuat pautan ke sauh dalam halaman dengan menggunakan aksara # sebelum ID sasaran. Sebagai contoh, anda mungkin mempunyai pautan "Skip to Content" di halaman anda, dan selepas mengklik pautan itu, ia akan melompat ke elemen dengan id "kandungan". Ini mengubah URL dalam bar alamat ke thispage.html#content, dan pemilih :target kini sepadan dengan elemen dalam dokumen dengan "Kandungan" ID. Ia seperti anda buat sementara waktu memasukkan pemilih #content. Kami mengatakan "sementara" kerana sekali pengguna mengklik pada titik utama yang berbeza, :target akan memadankan sasaran baru.
• :default: Digunakan untuk satu atau lebih elemen UI yang merupakan nilai lalai dalam satu set elemen yang sama. Sebagai contoh, jika butang radio dalam satu set butang radio dengan nama yang sama dipilih apabila halaman dimuatkan, ia akan terus memadankan :default selepas butang radio lain dalam kumpulan dengan nama yang sama dipilih. Begitu juga, kotak semak yang dipilih apabila beban halaman akan terus dipadankan :default selepas tidak terkawal.
• :valid: unsur -unsur yang sah berdasarkan jenis, corak, atau sifat input lain (seperti yang kita dibincangkan dalam Bab 4).
• :invalid: Unsur dan elemen yang diperlukan kosong yang tidak dapat memenuhi keperluan jenis atribut jenis atau corak.
• :in-range: unsur -unsur dengan had pelbagai dan nilai dalam had ini. Sebagai contoh, ini terpakai sehingga tarikh/masa, nombor, dan jenis input pelbagai dengan min dan max. Apabila nilai adalah batal, ia adalah :in-range.
• :out-of-range: Antonym of :in-range: elemen yang nilainya melebihi had julatnya. Nilai yang hilang tidak berada dalam julat kerana mereka kosong.
• :required: Kawalan borang dengan set atribut :required.
• :optional: Semua kawalan borang tanpa atribut :required.
• :read-only: Unsur pengguna tidak dapat mengubah kandungannya. Kebanyakannya adalah unsur -unsur kecuali unsur -unsur dengan atribut contenteditable set dan medan borang.
• :read-write: Pengguna boleh menukar unsur kandungan mereka, seperti contenteditable komponen dan medan input yang boleh ditulis.

Dalam pelayar yang menyokong sifat dalam kawalan bentuk mereka, sokongan penyemak imbas untuk sifat-sifat ini lengkap; IE8 dan versi terdahulu tidak menyokong required, pattern, :valid, dan :invalid. Berita baiknya ialah IE9 menyokong pemilih ini, tetapi bukan pemilih antara muka pengguna. IE10 dan IE11 Sokongan :checked, dan :enabled, tetapi tidak menyokong :disabled, :target, :indeterminate, :required, :optional, :default atau :in-range. Walaupun sokongan masih kurang, perpustakaan JavaScript seperti Selectivizr dapat membantu mencari kelas pseudo ini di Internet Explorer. :out-of-range :read-only :read-write Soalan Lazim untuk CSS Pseudo-Classes (FAQs)

(bahagian Soalan Lazim ditinggalkan di sini kerana panjangnya terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Beberapa Soalan Lazim boleh dikekalkan atau ditulis semula secara selektif seperti yang diperlukan dan tetap konsisten dengan makna asal.) >

Atas ialah kandungan terperinci Kelas pseudo - asas -asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!