Segala-galanya tentang kelas & elemen Pseudo CSS, dan kes penggunaannya

Dalam CSS Pseduo kelas & elemen ialah kata kunci yang ditambahkan pada pemilih yang membolehkan anda menggayakan dan elemen berdasarkan keadaan atau bahagian tertentu elemen tersebut.

Sebagai Contoh: Anda menuding ke atas elemen penambat, atau menambah gaya yang berbeza untuk melihat sama ada pautan dilawati atau tidak, atau anda boleh gunakan untuk menyasarkan huruf pertama perkataan dalam artikel. Dan banyak lagi boleh dicapai menggunakan kata kunci ini.

Ia disokong secara meluas merentas penyemak imbas utama dan telah menjadi sebahagian daripada CSS sejak versi awalnya.

Apakah Kelas Pseudo?

Kelas pseudo adalah seperti mencipta peraturan yang digunakan pada elemen berdasarkan keadaan atau keadaan tertentu.

Kelas Pseudo digunakan apabila keadaan elemen berubah kerana cara pengguna berinteraksi dengannya. Sebagai Contoh:

• Apabila seseorang menuding pada butang (:tuding)
• Apabila medan borang dipilih untuk menaip (:fokus)
• Apabila elemen ialah anak pertama atau terakhir dalam senarai

mari fahami dengan contoh:

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

Contoh ini menunjukkan dua keadaan elemen penambat yang berbeza. Apabila pengguna menuding ke atas elemen sauh, warna teks berubah kepada biru, tetapi menunjukkan warna lalai yang berbeza jika pengguna telah pun melawat dengan mengklik pada elemen sauh tersebut.

Kelas Pseduo boleh diwakili oleh satu titik bertindih : pada permulaan nama kata kunci. Berikut ialah senarai beberapa Kelas Pseudo biasa:

• tuding – Apabila pengguna tuding ke atas (letak tetikus pada elemen)
• :fokus – Apabila pengguna memilih medan (seperti kotak teks dalam borang)
• :nth-child(n) – Apabila anda mahu menggayakan item tertentu dalam senarai atau grid.
• :dilumpuhkan – Apabila elemen (seperti butang) dilumpuhkan dan tidak boleh diklik.

Apakah Pseudo-Elements?

Unsur Pseudo berbeza daripada kelas pseudo kerana ia menyasarkan bahagian tertentu unsur bukan keseluruhannya. Ia membolehkan anda menggayakan atau memasukkan sesuatu ke bahagian tertentu elemen yang biasanya anda tidak akan mempunyai akses terus kepadanya.

Contoh Unsur Pseudo:

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

Contoh ini menunjukkan cara untuk mengakses huruf pertama perenggan dan menggunakan gaya kami menggunakan CSS.

Anda mungkin perasan satu perkara, iaitu penggunaan tanda dua :: kolon digunakan untuk unsur pseudo, manakala, : tanda kolon digunakan untuk kelas pseudo. Ini ialah perwakilan sebenar sintaks untuk kedua-duanya.

Mengapa Kelas Pseudo & Unsur Pseudo?

Alat ini membolehkan kami melakukan beberapa perkara yang menarik dalam CSS tanpa perlu menulis banyak HTML atau JavaScript tambahan. Mereka memberikan lebih kawalan ke atas reka bentuk anda dan menjadikan tapak web anda lebih interaktif dan dinamik dengan hanya beberapa baris CSS.

Berikut ialah cara anda boleh membezakan antara kedua-duanya dan membantu anda memilih alat yang betul:

• Kelas Pseudo membantu mencipta interaksi seperti kesan tuding, medan input terfokus atau penggayaan berdasarkan kedudukan senarai.
• Unsur Pseudo membenarkan untuk menggayakan bahagian tertentu elemen atau menambah kandungan hiasan seperti, ikon, simbol sebelum atau selepas elemen.

Sokongan Pelayar

Pseudo-Elements & Pseudo-Classes disokong dalam semua penyemak imbas utama, tetapi apabila web mengembangkan kata kunci baharu ditambah yang tidak memberikan sokongan lalai untuknya. Oleh itu, kita perlu menggunakan awalan penyemak imbas untuk menyelesaikan isu ini.

Sebagai contoh, kelas pseudo yang lebih baharu seperti :not() tidak disokong dalam penyemak imbas lama, jadi ia berkelakuan berbeza. Anda harus sentiasa menyemak sifat mana yang disokong pada versi penyemak imbas menggunakan alat dalam talian Caniuse.com

Kesimpulan

Dalam kelas pseudo CSS & unsur pseudo bertindak sebagai senjata rahsia anda untuk mereka bentuk tapak web yang terasa hidup dan cantik tanpa menambah banyak kod tambahan. Ia membantu anda menggayakan elemen berdasarkan interaksi atau keadaan(pseudo-classess) atau menyasarkan bahagian tertentu elemen (pseudo-elements).

Blog ini pada asalnya disiarkan di tapak web Programmingly.dev. Baca artikel penuh dengan mengikuti pautan ini

Atas ialah kandungan terperinci Segala-galanya tentang kelas & elemen Pseudo CSS, dan kes penggunaannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!