Kelas CSSseudo dan Elemen Pseudo: Pandangan Mendalam

Pengenalan

Hai orang yang hebat. Hari ini, kami menyelam jauh ke dalam dunia Kelas Pseudo dan Unsur Pseudo dalam CSS. Ini adalah alatan berkuasa dalam kit alat CSS kami yang membantu kami menyasarkan dan menggayakan elemen dengan cara yang unik, menjadikan kerja kami lebih cekap dan halaman web kami lebih dinamik.

Kita akan mulakan dengan asas, memahami apa itu kelas pseudo dan unsur pseudo dan cara menggunakannya. Kami kemudian akan meneroka beberapa yang paling biasa yang akan anda temui dalam perjalanan pengekodan anda. Bukan itu sahaja, kami juga akan melihat banyak contoh pengekodan untuk melihat konsep ini dalam tindakan!

Kami akan membezakan lagi antara kelas pseudo dan unsur pseudo, menyerlahkan perbezaan dan persamaannya. Akhir sekali, kita akan melihat beberapa aplikasi praktikal dan amalan terbaik.

Jadi, dapatkan secawan kopi (atau teh), dan mari kita selami!

Memahami Kelas Pseudo

Definisi dan Penggunaan

Kelas Pseudo ialah kata kunci yang membolehkan anda memilih dan menggayakan elemen berdasarkan keadaannya, seperti :hover, atau kaitannya dengan elemen lain, seperti :first-child. Ia diawali dengan titik bertindih dan ditambahkan pada pemilih dalam CSS anda.

Kelas Pseudo yang Biasa Digunakan

Berikut ialah beberapa kelas pseudo yang biasa digunakan:

1. :legar - memilih elemen apabila pengguna menuding di atasnya.

2. :aktif - memilih elemen semasa keadaan pengaktifan, seperti apabila pengguna mengklik butang.

3. :anak pertama - memilih elemen anak pertama dalam ibu bapa.

4. :anak terakhir - memilih elemen anak terakhir dalam ibu bapa.

5. :nth-child(n) - memilih elemen anak ke-nth dalam ibu bapa.

Contoh Pengekodan Kelas Pseudo

Contoh Pemula

Begini cara anda menukar warna pautan apabila anda menuding di atasnya:

a:hover { color: red;}

Contoh Perantaraan

Contoh ini memilih anak pertama unsur ul dan menukar warnanya:

ul li:first-child { color: green;}

Contoh Lanjutan

Dalam contoh ini, kami menggunakan kelas pseudo :nth-child(n) untuk menggayakan baris ganjil dan genap bagi jadual secara berbeza:

tr:nth-child(even) { 
   background: #f2f2f2;
}

tr:nth-child(odd) { 
   background: #ddd;
}

Ingat, kelas pseudo boleh meningkatkan CSS anda dan menjadikan halaman web anda lebih dinamik. Berlatih menggunakannya dalam projek anda untuk selesa dengan sintaks dan gelagatnya.

Teruskan membaca, kami akan mempunyai lebih banyak contoh dunia sebenar.

Memahami Unsur Pseudo

Definisi dan Penggunaan

Elemen Pseudo ialah kata kunci yang digunakan dalam CSS untuk menggayakan bahagian tertentu elemen. Ia diawali dengan dua titik bertindih dan ditambahkan pada pemilih.

Unsur Pseudo yang Biasa Digunakan

Berikut ialah beberapa unsur pseudo yang biasa digunakan:

1. ::sebelum - memasukkan kandungan sebelum kandungan unsur.

2. ::selepas - memasukkan kandungan selepas kandungan elemen.

3. ::huruf pertama - memilih huruf pertama blok teks.

4. ::baris pertama - memilih baris pertama blok teks.

5. ::selection - menggunakan gaya pada bahagian dokumen yang telah diserlahkan oleh pengguna.

Contoh Pengekodan Elemen Pseudo

Contoh Pemula

Begini cara anda menyisipkan kandungan sebelum elemen:

p::before { content: "Important: "; color: red;}

Contoh Perantaraan

Contoh ini menggayakan huruf pertama perenggan:

p::first-letter { font-size: 20px; color: blue;}

Contoh Lanjutan

Dalam contoh ini, kami menukar warna latar belakang mana-mana teks yang dipilih oleh pengguna:

::selection { background: yellow;}

Sama seperti kelas pseudo, elemen pseudo boleh menambahkan banyak kedinamikan pada halaman web anda. Eksperimen dengan mereka dalam projek anda untuk lebih memahami penggunaan dan kesannya.

Perbezaan dan Persamaan antara Kelas Pseudo dan Unsur Pseudo

Kelas pseudo dan elemen pseudo membolehkan kami memilih dan menggayakan bahagian HTML kami yang tidak semestinya tersedia kepada kami melalui pemilih tradisional. Walau bagaimanapun, mereka mempunyai beberapa perbezaan utama:

1. Awalan: Kelas pseudo diawali dengan satu titik bertindih (:), manakala unsur-unsur pseudo diawali dengan dua titik bertindih (::).

2. Kegunaan: Kelas pseudo digunakan terutamanya untuk mentakrifkan keadaan istimewa elemen, seperti :hover atau :active. Sebaliknya, unsur pseudo digunakan untuk menggayakan bahagian tertentu unsur, seperti ::sebelum atau ::selepas.

3. Bilangan Kejadian: Kelas pseudo boleh digunakan beberapa kali dalam satu elemen, manakala elemen pseudo hanya boleh digunakan sekali.

Walaupun terdapat perbezaan ini, kedua-dua kelas pseudo dan elemen pseudo ialah alatan penting dalam CSS yang boleh menjadikan helaian gaya anda lebih dinamik dan cekap.

Contoh Praktikal

Contoh 1: Mencipta Butang dengan Tuding dan Keadaan Aktif Menggunakan Kelas Pseudo

contoh codepen

Dalam contoh ini, kami menggunakan kelas pseudo :hover dan :active untuk menukar warna latar belakang butang apabila pengguna menuding di atasnya atau mengkliknya. Ini meningkatkan pengalaman pengguna dengan memberikan maklum balas visual tentang interaksi pengguna.

Contoh 2: Menggunakan ::sebelum dan ::selepas Elemen Pseudo untuk Mencipta Petua Alat

contoh codepen

Dalam contoh ini, kami menggunakan elemen pseudo ::before untuk mencipta petua alat yang muncul apabila pengguna menuding pada elemen .tip alat. Teks petua alat ditetapkan menggunakan sifat kandungan dan kami menggunakan kelas pseudo :hover untuk menjadikan petua alat kelihatan apabila pengguna menuding di atas elemen.

Contoh 3: Menggayakan Huruf Pertama dan Baris Pertama Perenggan Menggunakan Unsur Pseudo

contoh codepen

Dalam contoh ini, kami menggunakan ::huruf pertama dan ::elemen pseudo baris pertama untuk menggayakan huruf pertama dan baris pertama perenggan. Huruf pertama diperbesarkan dalam saiz dan berwarna merah, dan baris pertama digariskan dan diubah menjadi huruf besar. Ini boleh digunakan untuk menambah penekanan atau bakat gaya pada kandungan teks anda.

Contoh 4: Mencipta Kesan Butang 3D dengan Kelas Pseudo

contoh codepen

Dalam contoh ini, kami menggunakan kelas pseudo :aktif untuk memberikan kesan 3D pada butang. Apabila butang ditekan, ia bergerak ke bawah, mencipta ilusi kedalaman.

Contoh 5: Mencipta Kesan Mesin Taip dengan Unsur Pseudo

contoh codepen

Dalam contoh ini, elemen pseudo ::before digunakan untuk memasukkan teks "Hello, World!", dan elemen pseudo ::after digunakan untuk mencipta kursor berkelip. Peraturan @keyframes digunakan untuk menukar gaya CSS secara beransur-ansur, mencipta animasi menaip.

Pengambilan Utama dan Amalan Terbaik

1. Pseudo-class dan pseudo-element ialah alatan yang berkuasa: Mereka membenarkan kami memilih dan menggayakan elemen berdasarkan keadaannya, hubungannya dengan elemen lain atau bahagian tertentu elemen.

2. Imbuhan awalan: Kelas pseudo menggunakan awalan bertindih tunggal, manakala unsur pseudo menggunakan awalan bertindih berganda.

3. Kes penggunaan berbeza: Kelas pseudo digunakan terutamanya untuk menggayakan elemen berdasarkan keadaannya atau hubungannya dengan elemen lain. Elemen pseudo, sebaliknya, membolehkan kita menggayakan bahagian tertentu unsur.

4. Amalan menjadikan sempurna: Lebih banyak anda menggunakan kelas pseudo dan elemen pseudo dalam projek anda, lebih selesa anda dengan sintaks dan gelagatnya.

5. Tingkatkan pengalaman pengguna: Kelas pseudo dan elemen pseudo boleh meningkatkan pengalaman pengguna dengan memberikan isyarat visual dan maklum balas.

Kesimpulan

Pseudo-class dan pseudo-element ialah alatan yang tidak ternilai dalam CSS. Mereka membenarkan kami melampaui batasan pemilih tradisional dan menggayakan halaman web kami dengan cara yang unik dan dinamik. Dengan memahami perbezaan mereka, dan bila serta cara menggunakannya, kami boleh mencipta antara muka pengguna yang lebih interaktif dan menarik.

Teruskan percubaan dengan mereka dan lihat cara mereka boleh meningkatkan projek anda yang seterusnya!

? Helo, saya Eleftheria, Pengurus Komuniti, pembangun, penceramah awam dan pencipta kandungan.

? Jika anda menyukai artikel ini, pertimbangkan untuk berkongsinya.

? Semua pautan | X | LinkedIn

Atas ialah kandungan terperinci Kelas CSSseudo dan Elemen Pseudo: Pandangan Mendalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!