Gambaran keseluruhan klasifikasi pemilih CSS biasa

Klasifikasi pemilih CSS biasa dan contoh kod khusus

Pemilih CSS ialah alat yang digunakan untuk memilih elemen dokumen HTML dan memberi mereka gaya khusus. Menguasai pelbagai jenis pemilih CSS adalah penting untuk menulis helaian gaya CSS yang cekap. Berikut ialah kategori pemilih CSS biasa dan contoh kod khusus.

1. Pemilih Elemen
   Pemilih elemen ialah pemilih CSS yang paling biasa. Ia memilih elemen dengan memilih nama tag mereka. Contohnya, untuk memilih semua elemen perenggan, anda boleh menggunakan gaya berikut:

p {
  color: blue;
}

2. Pemilih Kelas (Pemilih Kelas)
   Pemilih kelas menambah atribut kelas pada elemen HTML dan menggunakan noktah untuk mengenal pastinya. Ia membenarkan gaya yang sama digunakan pada berbilang elemen dalam dokumen. Contohnya adalah seperti berikut:

.button {
  background-color: red;
}

Cara menggunakannya dalam HTML:

<button class="button">Click me</button>

3. Pemilih ID (Pemilih ID)
   Pemilih ID menambah atribut id pada elemen HTML dan menggunakan tanda paun untuk mengenal pastinya. Ia sesuai untuk situasi di mana hanya satu elemen perlu menggunakan gaya tertentu. Contoh kod adalah seperti berikut: Cara menggunakan

#header {
  background-color: yellow;
}

dalam HTML:

<header id="header">This is the header</header>

4. Pemilih Kanak-kanak (Pemilih Kanak-kanak)
   Pemilih kanak-kanak boleh memilih elemen anak langsung bagi sesuatu elemen. Ia dikenal pasti oleh tanda lebih besar daripada (>). Kod berikut memilih rentang elemen anak langsung bagi semua elemen perenggan dan menetapkan warna fon kepada merah:

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. Pemilih Keturunan
   Pemilih keturunan boleh memilih semua elemen keturunan elemen. Ia diwakili menggunakan ruang. Kod berikut memilih elemen rentang di dalam semua elemen perenggan dan menetapkan warna latar belakang kepada kelabu:

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. Pemilih Adik Beradik Bersebelahan (Pemilih Adik Beradik Bersebelahan)
   Pemilih Adik Beradik Bersebelahan boleh memilih elemen adik beradik sejurus di belakang elemen. Ia dikenal pasti dengan tanda tambah (+). Kod berikut memilih elemen p serta-merta mengikuti semua elemen h2 dan menetapkan warna fon kepada biru:

h2 + p {
  color: blue;
}

<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. Pemilih Universal (Pemilih Universal)
   Pemilih universal boleh memilih semua elemen dalam dokumen HTML. Ia diwakili oleh asterisk (*). Kod berikut memilih semua elemen pada halaman dan menetapkan sempadan kepada 1 piksel:

* {
  border: 1px solid black;
}

Di atas ialah kategori pemilih CSS biasa dan kod sampelnya. Memahami pelbagai jenis pemilih dan penggunaannya akan membantu anda menjadi lebih fleksibel dan tepat semasa menulis helaian gaya CSS. Perlu diingat bahawa penggabungan dan pemilih bersarang juga boleh dilakukan dengan menggunakan pemilih CSS untuk pemilihan elemen dan definisi gaya yang lebih khusus.

Atas ialah kandungan terperinci Gambaran keseluruhan klasifikasi pemilih CSS biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!