Apakah jenis pemilih css yang ada?

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk reka bentuk web. Ia boleh menjadikan format halaman web lebih cantik dan standard. Selector ialah konsep yang sangat penting dalam CSS, yang boleh digunakan untuk memilih elemen dalam halaman web. Artikel ini akan memperkenalkan klasifikasi pemilih CSS untuk membantu pembaca mempelajari dan menguasai CSS dengan lebih baik.

1. Pemilih Elemen

Pemilih elemen ialah pemilih paling asas, yang boleh memilih elemen HTML dalam halaman web. Sintaks untuk pemilih elemen ialah nama elemen HTML. Sebagai contoh, kita boleh memilih semua elemen perenggan dengan kod CSS berikut:

p {
  color: red;
}

Kod ini akan menetapkan warna teks semua elemen perenggan kepada merah.

2. Pemilih kelas

Pemilih kelas merujuk kepada mengelaskan elemen dengan atribut yang sama tetapi nilai berbeza dalam halaman web, memilih nama kelas yang sama untuk mereka, dan kemudian menyasarkan nama kelas ini ialah pemilih untuk penggayaan. Bentuk sintaksis pemilih kelas ialah noktah (.) ditambah dengan nama kelas. Sebagai contoh, kita boleh memilih elemen dengan nama kelas "contoh" melalui kod CSS berikut:

.example {
  color: blue;
}

Kod ini akan menetapkan warna teks semua elemen dengan nama kelas "contoh" kepada biru.

3. Pemilih ID

Pemilih ID digunakan untuk mengenal pasti elemen unik dalam halaman web dan setiap elemen hanya boleh mempunyai satu ID. Sintaks untuk pemilih ID ialah tanda paun (#) diikuti dengan nama ID. Sebagai contoh, kita boleh memilih elemen dengan ID "header" melalui kod CSS berikut:

#header {
  font-size: 20px;
}

Kod ini akan menetapkan saiz fon elemen dengan ID "header" kepada 20px.

4. Pemilih keturunan

Pemilih keturunan boleh memilih elemen keturunan dalam halaman web. Sintaks untuk pemilih keturunan adalah untuk memisahkan elemen induk dan anak dengan ruang. Sebagai contoh, kita boleh memilih elemen p dalam semua elemen div dengan kod CSS berikut:

div p {
  text-align: center;
}

Kod ini akan memusatkan teks elemen p di bawah semua elemen div.

5. Pemilih adik beradik bersebelahan

Pemilih adik beradik bersebelahan boleh memilih dua elemen adik beradik bersebelahan yang memenuhi syarat. Bentuk sintaksis pemilih adik beradik bersebelahan ialah menambah tanda tambah (+) dan elemen yang dipilih selepas elemen yang layak. Sebagai contoh, kita boleh memilih elemen ul bersebelahan dengan elemen div melalui kod CSS berikut:

div + ul {
  list-style: none;
}

Kod ini akan mengalih keluar gaya senarai elemen ul bersebelahan dengan elemen div.

6. Pemilih elemen kanak-kanak

Pemilih elemen kanak-kanak boleh memilih elemen kanak-kanak yang memenuhi syarat. Bentuk sintaks pemilih elemen kanak-kanak ialah menambah tanda yang lebih besar daripada (>) dan elemen anak yang dipilih selepas elemen yang layak. Sebagai contoh, kita boleh memilih elemen h1, elemen anak elemen div, melalui kod CSS berikut:

div > h1 {
  font-weight: bold;
}

Kod ini akan menjadikan fon elemen h1, elemen anak div unsur, tebal.

Ringkasnya, pemilih CSS termasuk pemilih elemen, pemilih kelas, pemilih ID, pemilih keturunan, pemilih adik beradik bersebelahan dan pemilih elemen anak. Menggunakan pemilih ini dengan betul boleh menjadikan gaya CSS lebih bernuansa dan fleksibel. Mempelajari dan menguasai penggunaan pemilih ini akan membantu meningkatkan kecekapan dan kualiti kesan CSS.

Atas ialah kandungan terperinci Apakah jenis pemilih css yang ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!