Tingkatkan carian dan kelajuan memori pemilih CSS

Cepat cari dan ingat pemilih CSS yang biasa digunakan

Pemilih CSS ialah bahagian yang sangat penting dalam pembangunan web. Mereka membenarkan kami menggayakan dan mengendalikan halaman web dengan memilih elemen. Dalam pembangunan harian, menguasai pemilih CSS yang biasa digunakan adalah sangat penting untuk menulis kod CSS yang cekap. Berikut akan memperkenalkan beberapa pemilih CSS yang biasa digunakan dan memberikan contoh kod khusus untuk membantu anda mencari dan mengingatinya dengan cepat.

1. Pemilih elemen (pemilih elemen)
   Pemilih elemen ialah jenis pemilih CSS yang paling biasa, yang menggunakan gaya dengan memilih nama teg elemen. Contohnya, kod berikut akan menetapkan warna teks semua perenggan kepada merah:

p {
  color: red;
}

2. Pemilih kelas (pemilih kelas)
   Pemilih kelas bermula dengan noktah (.) dan menggunakan gaya dengan memilih elemen dengan yang ditentukan atribut kelas. Sebagai contoh, kod berikut akan menetapkan warna latar belakang semua elemen dengan kelas "kotak" kepada kuning:

.box {
  background-color: yellow;
}

3. pemilih id (pemilih id)
   Pemilih id bermula dengan tanda paun (#) dan menentukan atribut id dengan memilih elemen untuk menggunakan gaya. Ambil perhatian bahawa pemilih id harus unik dalam halaman yang sama. Sebagai contoh, kod berikut akan menetapkan fon elemen dengan id "pengepala" kepada 20px:

#header {
  font-size: 20px;
}

4. Pemilih keturunan Pemilih turunan menggunakan gaya dengan memilih unsur keturunan unsur. Pemilih keturunan menggunakan ruang untuk memisahkan elemen. Sebagai contoh, kod berikut akan menetapkan warna teks perenggan di dalam semua elemen div kepada biru:
   

div p {
  color: blue;
}

Pemilih kanak-kanak (pemilih kanak-kanak)
5. Pemilih kanak-kanak menggunakan gaya dengan memilih elemen anak langsung sesuatu elemen. Pemilih elemen anak menggunakan tanda yang lebih besar daripada (>) untuk memisahkan elemen. Sebagai contoh, kod berikut akan menetapkan saiz fon semua elemen anak langsung unsur div dengan kelas "bekas" kepada 18px:
   

div > .container {
  font-size: 18px;
}

pemilih adik beradik bersebelahan (pemilih adik beradik bersebelahan)
6. Pemilih adik beradik bersebelahan memilih elemen tertentu adik beradik bersebelahan untuk mengaplikasikan gaya kepada. Pemilih adik beradik bersebelahan menggunakan tanda tambah (+) untuk memisahkan elemen. Contohnya, kod berikut akan menetapkan warna latar belakang semua elemen adik beradik bersebelahan kepada kelabu:
   

div + div {
  background-color: gray;
}

Pemilih kelas pseudo (pemilih kelas pseudo)
7. Pemilih kelas pseudo digunakan untuk memilih elemen dalam keadaan tertentu, seperti sebagai: hover Digunakan untuk memilih elemen dalam keadaan tetikus. Sebagai contoh, kod berikut akan menetapkan warna teks apabila tetikus melayang di atas pautan kepada merah:
   

a:hover {
  color: red;
}

Pemilih unsur pseudo (pemilih unsur pseudo)
8. Pemilih unsur pseudo digunakan untuk memilih bahagian tertentu elemen, seperti::before Digunakan untuk menambah kandungan sebelum elemen. Contohnya, kod berikut akan menambah blok teks di hadapan elemen p:
   

p::before {
  content: "前面有一个文本块";
}

Di atas ialah beberapa pemilih CSS yang biasa digunakan dan contoh kod yang sepadan, yang sering digunakan dalam pembangunan web. Dengan menguasai pemilih ini, anda boleh menulis kod CSS dengan lebih fleksibel dan cekap. Apabila anda menghadapi masalah yang memerlukan penggayaan, anda boleh mencari dan mengingati pemilih ini dengan cepat untuk menyelesaikan masalah dengan lebih cepat. Saya harap artikel ini akan membantu pembangunan CSS semua orang.

Atas ialah kandungan terperinci Tingkatkan carian dan kelajuan memori pemilih CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!