Apakah perbezaan antara kelas pemilih CSS dan id? id dan penggunaan kelas dalam HTML

Apakah perbezaan antara kelas pemilih CSS dan id? id dan penggunaan kelas dalam HTML

Chen Weiliang baru-baru ini sedang mengusahakan SEO , mengoptimumkan tema WordPress laman web tersebut.

Walaupun saya telah mempelajari beberapa ilmu asas HTML dan CSS sebelum ini, tetapi saya sudah lama tidak mengendalikannya, terutamanya penggunaan bahagian CSS, ia mudah dilupakan.

Jadi, rekod dan rumuskan perbezaan dan penggunaan id dan kelas pemilih CSS di sini:

• id sepadan dengan #div
• kelas sepadan dengan .div

Perbezaan antara id dan kelas

penerangan id

• id ialah teg tetap, yang digunakan untuk menentukan gaya yang lebih besar dalam halaman web, yang ditakrifkan dalam bentuk #div
• Contohnya: membahagi lajur, atas, badan, bawah, dll...
• Digunakan untuk menentukan elemen tertentu, yang hanya boleh muncul sekali setiap halaman dan tidak boleh dipanggil berulang kali.

penerangan kelas

• Kelas ialah kumpulan gaya, yang digunakan untuk mentakrifkan gaya terperinci dalam halaman web. Ia ditakrifkan dalam bentuk .div dan boleh diulang.
• Contohnya: menu tertentu, baris teks, dsb...
• Pada halaman yang sama, ia boleh dipanggil berulang kali oleh berbilang elemen

Pemilih div itu sendiri tidak mempunyai sifat. Dengan mentakrifkan cssnya, ia mengawal beberapa reka letak seperti lebar, ketinggian, warna latar belakang dan saiz teks div.

Laman web e-dagang biasa dan halaman web HTML yang dihasilkan oleh program pembinaan laman web menggunakan CSS untuk mencapai susun atur halaman.

Apakah pemilih?

Takrifan setiap gaya CSS terdiri daripada 2 bahagian:

选择器 {样式}

• Bahagian sebelum {} ialah "pemilih".
• "Pemilih" menunjukkan "gaya" {} yang ia bertindak.
• Iaitu, pada elemen halaman web yang manakah "gaya" ini berfungsi?

contoh kod

Berikut ialah cara untuk memilih dan menggayakan elemen class="sidebar":

.sidebar
{ 
background-color:black;
}

Berikut ialah cara untuk memilih dan menggayakan elemen dengan id="footer":

#footer
{ 
background-color:black;
}