Kuasai secara beransur-ansur pemilih CSS asas yang biasa digunakan

Fahami pemilih asas dalam kod CSS: Kuasai pemilih biasa langkah demi langkah

Dalam HTML dan CSS, pemilih ialah alat penting untuk memilih elemen dan menggunakan gaya. Memahami dan mahir menggunakan pemilih asas dalam kod CSS adalah salah satu keperluan asas untuk menjadi pembangun bahagian hadapan yang baik. Artikel ini secara beransur-ansur akan memperkenalkan pemilih biasa dalam kod CSS untuk membantu pembaca menguasai penggunaan asas dan kemahiran penggunaan pemilih.

1. Pemilih Elemen
   Pemilih paling asas ialah pemilih elemen, yang boleh memilih elemen HTML yang sepadan dengan namanya. Contohnya, untuk memilih semua elemen perenggan, anda boleh menggunakan kod berikut:
   p {
   / kod gaya CSS /
   }
   Dengan cara ini, gaya yang sama akan digunakan pada semua elemen perenggan.
2. Pemilih Kelas
   Pemilih kelas digunakan untuk memilih elemen dengan nama kelas yang sama. Dalam HTML, kita boleh menambah atribut kelas pada elemen dan menggunakan titik (.) dalam CSS untuk mewakili pemilih kelas. Sebagai contoh, kod berikut akan memilih semua elemen dengan kelas "kotak":
   .box {
   / kod gaya CSS /
   }
   Menggunakan pemilih kelas boleh menggunakan gaya yang sama dengan mudah pada sekumpulan elemen, kami hanya Anda perlu menetapkan atribut kelas unsur-unsur ini kepada nilai yang sama dalam HTML.

3. Pemilih ID
   Pemilih ID digunakan untuk memilih elemen dengan ID unik. Dalam HTML, kita boleh menambah atribut id pada elemen dan menggunakan tanda paun (#) dalam CSS untuk mewakili pemilih ID. Sebagai contoh, kod berikut akan memilih elemen dengan id "header":

   header {

   / CSS style code /
   }
   Pemilih ID mempunyai keutamaan tertinggi dan boleh digunakan untuk memilih satu elemen tertentu .

4. Pemilih Keturunan
   Pemilih Keturunan digunakan untuk memilih keturunan unsur. Ia diwakili dengan menggunakan ruang dalam pemilih. Contohnya, kod berikut akan memilih semua elemen kuat dalam elemen perenggan:
   p kuat {
   / kod gaya CSS /
   }
   Pemilih keturunan boleh digunakan untuk memilih elemen anak, elemen cucu, elemen cucu, dsb. .
5. Pemilih Adik Beradik Bersebelahan
   Pemilih Adik Beradik Bersebelahan digunakan untuk memilih elemen adik beradik seterusnya selepas elemen. Ia ditunjukkan dengan menggunakan tanda tambah (+) dalam pemilih. Sebagai contoh, kod berikut akan memilih elemen p pertama sejurus selepas elemen h1:
   h1 + p {
   / kod gaya CSS /
   }
   Pemilih adik beradik bersebelahan boleh digunakan untuk memilih elemen serta-merta mengikut An tertentu elemen yang muncul kemudian.
6. Pemilih kelas pseudo
   Pemilih kelas pseudo digunakan untuk memilih keadaan atau ciri tertentu elemen. Ia diwakili dengan menggunakan titik bertindih (:) dalam pemilih. Contohnya, kod berikut akan memilih semua elemen pautan yang berada dalam keadaan tuding tetikus:
   a:hover {
   / kod gaya CSS /
   }
   Pemilih kelas pseudo yang biasa digunakan juga termasuk: :aktif (menunjukkan apabila elemen diaktifkan) , :focus (menunjukkan apabila elemen menerima fokus), :first-child (menunjukkan bahawa elemen ialah elemen anak pertama unsur induknya), dsb.

Di atas memperkenalkan beberapa pemilih biasa dalam kod CSS Pemilih ini adalah alat asas yang sangat diperlukan dalam pembangunan bahagian hadapan. Dengan menguasai penggunaan pemilih ini, kami boleh menggunakan gaya dengan lebih mudah pada elemen HTML dan mencapai reka bentuk web yang lebih cantik dan cekap. Amalan berterusan dan pemahaman mendalam tentang kemahiran menggunakan pemilih CSS akan membantu meningkatkan kebolehan dan tahap kami dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Kuasai secara beransur-ansur pemilih CSS asas yang biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!