Jenis Pemilih
Jenis Pemilih
Jenis Pemilih 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.
Pengenalan
Helo,
Dalam pelajaran ini, kita akan menambah baik pengetahuan CSS kita dengan pemilih yang lebih kompleks.
Takrif gaya berganda
Kita boleh membuat berbilang takrif gaya dengan meletakkan koma bertitik antara setiap gaya.
.first{
color:blue;
font-size:20px;
text-align: center;
}terdapat dokumen HTML yang menjadi lebih kompleks
Setakat ini, kita telah menggunakan teg, ID dan pemilih kelas yang mudah. Namun, dalam sesetengah keadaan, apabila antara muka pengguna menjadi kompleks, kita perlu menggunakan pemilih yang lebih kompleks.
Dalam contoh di bawah, terdapat dokumen HTML yang menjadi lebih kompleks.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>menganalisis contoh
Sekarang mari kita analisis kod kita.
- Terdapat div dengan ID my-area yang bertindak sebagai bekas di dalam badan halaman. Ia ialah leluhur bagi semua elemen di bawah div ini.
- Elemen p dengan kelas first ialah saudara kepada elemen div dengan kelas second.
- Elemen ketiga ialah anak kepada elemen kedua, dan elemen my-area boleh dianggap sebagai leluhur elemen ketiga.
Amaran
Anda boleh menganggap susun atur HTML seperti salasilah keluarga sebenar.
Anda boleh mewarisi ciri genetik daripada datuk anda.
Namun, jika pewarisan ini berubah pada bapa anda, gen daripada bapa akan menjadi lebih dominan dan sifat daripada datuk anda akan berubah.
Gabungan Pemilih
Sekarang mari kita lihat cara membuat gabungan dalam pemilih.
Pernyataan berikut menyatakan bahawa elemen dengan kelas second ialah keturunan (anak atau cucu) kepada elemen dengan kelas third.
Jika terdapat ruang antara kedua-dua kelas, ini bermaksud kelas di sebelah kiri sedang mencari keturunan.
.second .third{
color:red;
}Pemilih Anak
Dalam contoh di bawah,
Ini bermaksud memilih kelas third, iaitu anak kepada kelas second.
Tanda lebih besar bermaksud memilih anak kepada elemen yang berkaitan.
.second > .third{
color:red;
}kita boleh menggabungkan pemilih teg dan kelas untuk memilih elemen
Pada masa yang sama, kita boleh menggabungkan pemilih teg dan kelas untuk memilih elemen.
Contoh di bawah akan memilih elemen p dengan kelas third.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Katakan kita mahu memilih div dengan kelas first
Katakan kita mahu memilih div dengan kelas first.
Dalam contoh di bawah, ini bermaksud memilih elemen dengan kelas first, yang merupakan anak kepada elemen div dengan ID my-area.
Ini meningkatkan kekhususan elemen yang hendak dipilih.
div#my-area > .first{
color:red;
}Memilih semua
Tanda asterisk (*) penting dalam kalangan pemilih.
Dan tanda ini bermaksud memilih semua.
Dalam contoh di bawah, pemilih tersebut menyatakan bahawa elemen dengan ID my-area hendaklah memilih semua keturunan.
Perkara yang perlu kita ambil perhatian di sini ialah pemilih ini bukan sahaja memilih anak, tetapi semua keturunan.
Jika kita mahu memilih anak sahaja, kita perlu meletakkan tanda lebih besar sebelum asterisk.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Pemilih Saudara Bersebelahan
Kita telah menggunakan pemilih keturunan dan pemilih anak, sekarang mari kita pelajari pemilih saudara.
Pemilih saudara menggunakan tanda + untuk memilih saudara yang seterusnya.
Dalam contoh kita, warna latar elemen perenggan ketiga akan menjadi kuning melalui pemilih tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Pemilih Saudara Umum
Jika kita mahu memilih bukan sahaja saudara pertama yang seterusnya, tetapi semua saudara selepasnya, kita menggunakan tanda tilde (~).
Simbol tilde juga dikenali sebagai penggabung saudara berikutnya.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Kelas Pseudo dan Kelas CSS
Ungkapan yang bukan kelas tetapi berkelakuan seperti kelas dipanggil kelas pseudo.
Kita tidak mentakrifkan kelas pseudo pada mana-mana elemen dalam HTML.
Apabila pelayar mentafsir kod, pelayar menganggap kelas tersebut wujud. Oleh itu, kita boleh menggunakan kelas pseudo dalam pemilih CSS.
Kelas Pseudo :hover
Dalam kalangan kelas pseudo, :hover sememangnya yang paling dikenali.
Hover (:hover) ialah kelas pseudo yang ditakrifkan secara automatik oleh pelayar pada elemen yang berkaitan apabila tetikus diletakkan di atas elemen tersebut.
Kelas pseudo digunakan selepas simbol titik bertindih (:) dalam pernyataan pemilih.
Sintaks untuk menggunakan kelas pseudo ditunjukkan dalam contoh di bawah.
selector:pseudo-class {
property: value;
}Menggayakan Pautan dengan :hover
Sekarang mari kita cipta pautan dan lihat rupanya apabila anda meletakkan penunjuk di atasnya.
Amaran: Oleh sebab peranti mudah alih tidak mempunyai peristiwa hover seperti di Web, kesan ini tidak akan kelihatan dalam aplikasi mudah alih CoddyKit.
Dalam contoh di bawah, mari kita perhatikan bahawa apabila kita meletakkan tetikus di atas pautan, warna pautan akan berubah menjadi hijau.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>kelas pseudo :first-child
Salah satu kelas pseudo yang paling mengelirukan ialah :first-child.
Biasanya, apabila melihat namanya, kita boleh menyimpulkan bahawa kelas ini bermaksud memilih anak pertama bagi sesuatu elemen.
Sebenarnya, kesimpulan ini tidak betul.
Kelas ini digunakan untuk memilih elemen pertama dalam kalangan saudara elemen tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>kelas pseudo :last-child
last-child ialah lawan kepada kelas pseudo first-child. Kelas ini digunakan untuk memilih elemen terakhir dalam kalangan saudara elemen tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>elemen pseudo ::before
Jika kita mahu menambahkan sesuatu sebelum elemen, pemilih pseudo ::before digunakan.
Dalam contoh di bawah, kita menambahkan kandungan 'Hello' sebelum elemen pengepala.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>elemen pseudo ::after
Elemen pseudo ::after, yang merupakan lawan kepada elemen pseudo ::before, digunakan untuk menambahkan kandungan baharu selepas elemen.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Kelas Pseudo Senarai
Kita telah mempelajari kelas pseudo yang paling banyak digunakan. Walau bagaimanapun, masih terdapat berpuluh-puluh lagi.
Anda boleh mendapatkan senarai semua kelas pseudo daripada pautan di bawah. Anda boleh menggunakan mana-mana daripadanya apabila diperlukan.
Tahniah
Tahniah 🎉
Dalam bahagian ini, kita telah mempelajari Jenis Pemilih.
Dalam bahagian seterusnya, kita akan mempelajari sifat CSS yang paling banyak digunakan
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 “Jenis Pemilih” percuma?
Ya — teks penuh “Jenis Pemilih” 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 “Jenis Pemilih”?
Jenis Pemilih 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 “Jenis Pemilih” 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.