Pemilih Kelas
Pemilih Kelas
Pemilih Kelas ialah pelajaran HTML for Kids percuma di CoddyKit. Ini ialah pelajaran 1 daripada 1. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML for Kids, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML for Kids merangkumi sejumlah 1 pelajaran.
Sebab Menggunakan Pemilih Kelas
Helo,
Kita telah sampai kepada pemilih kelas, salah satu perkara paling penting dalam CSS.
Kita sudah mengetahui pemilih kelas kerana kita kerap menggunakannya sehingga kini.
Dalam pelajaran ini, mari kita kukuhkan pengetahuan kita dan pelajari kelebihannya berbanding pemilih lain.
Sintaks Pemilih Kelas
Jadi, mari kita mulakan.
Kita menggunakan pemilih titik (.) untuk mentakrifkan pemilih jenis kelas. Di bawah ialah pemilih kelas bernama my-class dan gaya font-size diberikan nilai 10px.
.my-class {
font-size: 10px;
}
Kita juga boleh mentakrifkan lebih daripada satu gaya untuk pemilih kelas.
.my-class {
font-size: 10px;
}
Pemilih Berbilang
Kita boleh menetapkan lebih daripada satu kelas kepada elemen yang sama.
Dalam contoh di bawah, dua pemilih kelas bernama el1 dan el2 ditentukan.
Dua kelas atau lebih boleh ditambahkan pada atribut class bagi elemen yang dicipta dengan tag p, dengan meletakkan ruang antara setiap kelas.
Anda dapat melihat bahawa gaya daripada kedua-dua kelas dicerminkan pada elemen itu serentak dalam bahagian pratonton.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Jadi, mengapakah kita patut memilih pemilih kelas berbanding pemilih teg dan ID?
Jadi, mengapakah kita patut memilih pemilih kelas berbanding pemilih teg dan ID?
Apabila kita menggunakan pemilih teg, hasil yang tidak diingini mungkin berlaku kerana pemilih ini mempengaruhi semua elemen yang dicipta dengan teg tersebut. Oleh itu, kita biasanya menggunakan teg ini jika terdapat ciri umum yang perlu dimiliki oleh semua elemen.
Sebagai contoh, jika kita mahu keluarga fon setiap elemen menjadi 'Lato' , kita membuat takrif seperti berikut.
a{
font-family: Lato,sans-serif
}Jadi, mengapakah kita patut memilih pemilih kelas berbanding pemilih teg dan ID? 2
Kita boleh membuat takrif khusus elemen dengan pemilih ID.
Walau bagaimanapun, oleh sebab semua takrif gaya kita hanya sah untuk satu elemen, kita perlu menulis semula kod untuk elemen lain yang ingin memaparkan sifat yang sama.
Hal ini kerana hanya boleh terdapat satu elemen dalam dokumen HTML dengan ID yang sama.
Kekhususan CSS
Sekarang mari kita pelajari konsep kekhususan CSS.
Mari kita cipta semula satu masalah untuk memahami topik ini dengan lebih baik, dan kita akan mempelajari konsep ini sambil menyelesaikan masalah tersebut.
Kekhususan CSS 2
Dalam contoh di bawah,
Satu takrif gaya telah dibuat untuk teg p.
Satu takrif gaya dibuat dengan pemilih kelas bernama .first.
Kedua-dua pemilih memilih elemen yang sama dalam dokumen HTML kita.
Kedua-dua pemilih telah mentakrifkan gaya untuk menggantikan sifat warna yang sama. Dalam keadaan ini, konflik akan berlaku.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Kekhususan CSS 3
Apabila melihat contoh tersebut, kita mungkin berfikir bahawa warnanya akan menjadi merah berdasarkan pengetahuan terdahulu kita.
Hal ini kerana konsep lata memberitahu kita bahawa bahagian terakhir dalam susunan kod akan diutamakan.
Walau bagaimanapun, terdapat sedikit perincian. Jika kedua-duanya mempunyai kekhususan yang sama, kod yang datang kemudian akan diutamakan.
Ini ialah penilaian yang menunjukkan kepentingan kekhususan pemilih pada elemen atau elemen-elemen yang berkaitan.
Tanpa mengira kedudukannya dalam kod, pemilih yang mempunyai tahap kekhususan tinggi akan dinilai oleh pelayar.
Amaran
Pemilih kelas ialah takrif yang lebih khusus berbanding pemilih elemen. Oleh itu, tahap kekhususannya lebih tinggi.
Kekhususan Pemilih
Menentukan pemilih yang lebih khusus sebenarnya sangat mudah.
Oleh sebab hanya terdapat 1 ID yang diberikan kepada satu elemen dan hanya terdapat 1 ID sedemikian pada halaman web, kita menjangkakan pemilih ini menjadi pemilih keutamaan tertinggi.
Pemilih kelas pula boleh dinilai lebih khusus berbanding pemilih teg kerana pemilih ini memilih kumpulan yang lebih khusus daripada teg.
Kita akan melihat bahawa pemilih ID menang dalam contoh di bawah dengan memilih elemen yang sama menggunakan 3 pemilih yang berbeza.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Alat Pengira Kekhususan
Anda boleh mengakses pengira kekhususan dalam talian melalui pautan ini.
Apabila Kekhususan Penting
Jadi, adakah saya perlu menggunakan pengiraan ini setiap masa?
Sudah tentu tidak. Konflik tidak akan berlaku apabila kita menulis kod mengikut piawaian.
Jadi, anda tidak perlu membuat pengiraan matematik setiap masa, tetapi apabila terdapat masalah, anda mungkin memerlukan maklumat ini untuk menyelesaikannya.
Tahniah
Tahniah. 🥳🥳🥳
Anda telah menamatkan pelajaran Pemilih Kelas dan Kekhususan CSS.
Dalam bahagian seterusnya, kita akan mempelajari Jenis Pemilih.
Anda boleh mengklik untuk meneruskan ke bahagian seterusnya.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 16
- Pelajaran
- 35
Soalan Lazim
Adakah pelajaran “Pemilih Kelas” percuma?
Ya — teks penuh “Pemilih Kelas” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus HTML for Kids, tingkat taraf kepada CoddyKit PRO. Kursus HTML for Kids merangkumi sejumlah 1 pelajaran.
Apakah yang akan saya pelajari dalam “Pemilih Kelas”?
Pemilih Kelas Anda berlatih HTML for Kids menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML for Kids?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML for Kids di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 1.
Berapa lamakah pelajaran “Pemilih Kelas” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.