Master CSS Selectors: Panduan Lengkap Permulaan-ke-Pakar

Kuasa Tersembunyi Pemilih CSS: Panduan untuk Pereka Web

pengenalan

CSS (Cascading Style Sheets) ialah asas reka bentuk web moden, membolehkan pembangun mengawal penampilan dan reka letak tapak web. Di tengah-tengah CSS terletak pemilih, yang menentukan elemen pada halaman web yang digayakan. Walaupun pemilih asas seperti div dan h1 terkenal, menguasai pemilih CSS lanjutan boleh meningkatkan permainan reka bentuk web anda dan membantu anda mencipta tapak web yang menakjubkan, cekap dan dinamik.

Dalam panduan komprehensif ini, kami akan menyelami pemilih CSS daripada asas kepada teknik yang paling maju. Setiap bahagian termasuk penjelasan langkah demi langkah dan contoh praktikal untuk membantu walaupun pemula menjadi pakar CSS.

---

Apakah Pemilih CSS?

Pemilih CSS ialah corak yang digunakan untuk menyasarkan dan menggayakan elemen HTML. Anggap ia sebagai arahan untuk penyemak imbas, memberitahu elemen mana pada halaman harus menerima gaya tertentu.

Sebagai contoh, dalam peraturan CSS ini:

p {
  color: blue;
}

P ialah pemilih dan ia menyasarkan semua

elemen, menggunakan warna: biru; gaya kepada mereka.

---

Asas: Jenis Pemilih CSS

1. Pemilih Universal

Pemilih universal (*) sepadan dengan semua elemen pada halaman.

* {
  margin: 0;
  padding: 0;
}

Ini berguna untuk menetapkan semula gaya penyemak imbas lalai.

---

2. Jenis Pemilih

Mensasarkan teg HTML khusus seperti div, h1 atau p.

h1 {
  font-size: 24px;
}

---

3. Pemilih Kelas

Mensasarkan elemen dengan atribut kelas tertentu.

<div>





<pre class="brush:php;toolbar:false">.highlight {
  background-color: yellow;
}

---

4. Pemilih ID

Mensasarkan elemen dengan id tertentu.

<div>





<pre class="brush:php;toolbar:false">#unique {
  color: red;
}

---

5. Pemilih Kumpulan

Membenarkan menggayakan berbilang pemilih bersama-sama.

h1, h2, p {
  font-family: Arial, sans-serif;
}

---

Beralih ke Pemilih Pertengahan

1. Pemilih Keturunan

Mensasarkan elemen di dalam elemen lain, tidak kira betapa dalam bersarangnya.

div p {
  color: green;
}

Ini menyasarkan semua

tag di dalam

elemen.

---

2. Pemilih Kanak-kanak

Sasarkan kanak-kanak sahaja, menggunakan > simbol.

ul > li {
  list-style-type: square;
}

---

3. Pemilih Adik Beradik Bersebelahan

Mensasarkan elemen pertama serta-merta mengikut elemen yang ditentukan, menggunakan simbol.

h1 + p {
  font-style: italic;
}

---

4. Pemilih Adik Beradik Umum

Mensasarkan semua adik-beradik selepas elemen yang ditentukan, menggunakan simbol ~.

p {
  color: blue;
}

---

Pemilih Lanjutan: Memperkasakan Reka Bentuk Web Moden

1. Pemilih Atribut

Pemilih atribut menyasarkan elemen berdasarkan atribut atau nilai atribut mereka.

Contoh:

• Padankan elemen dengan atribut khusus:

* {
  margin: 0;
  padding: 0;
}

• Padankan elemen dengan nilai atribut tertentu:

h1 {
  font-size: 24px;
}

• Padankan elemen di mana atribut bermula dengan nilai:

<div>





<pre class="brush:php;toolbar:false">.highlight {
  background-color: yellow;
}

---

2. Kelas Pseudo

Kelas pseudo mentakrifkan keadaan istimewa unsur.

Kelas Pseudo biasa:

• :hover: Menggunakan gaya apabila pengguna menuding pada elemen.

<div>





<pre class="brush:php;toolbar:false">#unique {
  color: red;
}

• :nth-child(n): Menyasarkan elemen berdasarkan kedudukannya dalam ibu bapa.

h1, h2, p {
  font-family: Arial, sans-serif;
}

• :not(selector): Tidak termasuk elemen daripada pemilihan.

div p {
  color: green;
}

---

3. Unsur Pseudo

Pseudo-elemen menggayakan bahagian tertentu elemen.

Contoh:

• ::before: Menambah kandungan sebelum elemen.

ul > li {
  list-style-type: square;
}

• ::selepas: Menambah kandungan selepas elemen.

h1 + p {
  font-style: italic;
}

---

4. Kombinator untuk Pemilihan Kompleks

Gabungkan pemilih untuk penyasaran yang berkuasa dan tepat.

• Penggabung keturunan:

h1 ~ p {
  color: gray;
}

• Penggabung kanak-kanak:

input[type] {
  border: 1px solid #000;
}

---

Petua untuk Menggunakan Pemilih Lanjutan

1. Pastikan Ia Boleh Dibaca: Pemilih yang terlalu kompleks boleh mengelirukan rakan usaha sama.
2. Optimumkan untuk Prestasi: Penyemak imbas menilai pemilih dari kanan ke kiri, jadi elakkan corak yang terlalu luas.
3. Uji Secara Tetap: Pastikan pemilih anda menyasarkan elemen yang dimaksudkan merentas pelayar yang berbeza.

---

Soalan Lazim Mengenai Pemilih CSS

Apakah Perbezaan Antara Pemilih id dan kelas?

• Id adalah unik dan digunakan pada satu elemen, manakala kelas boleh digunakan semula untuk berbilang elemen.

Bolehkah saya Menggunakan Berbilang Kelas Pseudo Bersama-sama?

Ya, anda boleh merantai kelas pseudo. Contohnya:

input[type="text"] {
  background-color: lightblue;
}

Bagaimanakah Pemilih Atribut Berbanding dengan Kelas?

Pemilih atribut lebih dinamik dan boleh menyasarkan elemen tanpa memerlukan atribut kelas atau id tambahan.

---

Kesimpulan

Pemilih CSS ialah asas kepada mana-mana reka bentuk web. Dengan menguasainya, anda boleh mengubah tapak web anda menjadi pengalaman yang menarik secara visual dan mesra pengguna. Mulakan dengan asas, terokai pemilih perantaraan dan manfaatkan teknik lanjutan untuk membawa kemahiran anda ke peringkat seterusnya.

Percubaan dengan pemilih ini dan lihat perbezaan yang mereka buat dalam projek anda!

Atas ialah kandungan terperinci Master CSS Selectors: Panduan Lengkap Permulaan-ke-Pakar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn