Penjelasan terperinci tentang cara menggunakan class css selector_CSS/HTML

Pemilih kelas
Dalam CSS, pemilih kelas dipaparkan dengan noktah:

Salin kod Kod adalah sebagai berikut :

.center {text-align: center}

Dalam contoh di atas, semua elemen HTML dengan kelas tengah dipusatkan.
Dalam kod HTML di bawah, kedua-dua elemen h1 dan p mempunyai kelas tengah. Ini bermakna kedua-duanya akan menghormati peraturan dalam pemilih ".center".

Salin kod Kod adalah seperti berikut:

   

Tajuk ini akan diselaraskan ke tengah

Nota: Nombor tidak boleh digunakan sebagai aksara pertama nama kelas! Ia tidak akan berfungsi dalam Mozilla atau Firefox.

Seperti id, kelas juga boleh digunakan sebagai pemilih terbitan:

Salin kod Kod adalah seperti berikut:

.fancy td {

      warna: #f60; (Elemen yang lebih besar bernama fancy mungkin jadual atau div)
elemen juga boleh dipilih berdasarkan kelasnya:

Salin kod


Kodnya adalah seperti berikut:

td.fancy { warna: #f60; latar belakang: #666; }

Dalam contoh di atas, sel jadual dengan nama kelas mewah akan berwarna oren dengan latar belakang kelabu.




Salin kod

Kod adalah seperti berikut:

  Pemilih berbilang kategori

1 Dalam HTML, nilai kelas mungkin mengandungi senarai perkataan, dengan setiap perkataan dipisahkan oleh ruang. Sebagai contoh, jika anda ingin menandakan elemen tertentu sebagai penting dan amaran, anda boleh menulis (urutan dua perkataan itu tidak penting, anda boleh menulis amaran penting):

Salin kod

Kod adalah seperti berikut:

Perenggan ini ialah amaran yang sangat penting .

Kami menganggap bahawa semua elemen dengan kelas penting dalam huruf tebal, dan semua elemen dengan amaran kelas adalah dalam huruf condong dan kelas mengandungi kedua-dua elemen penting dan semua juga mempunyai latar belakang perak. Anda boleh menulis:

Salin kod

Kod adalah seperti berikut:

.penting {font -weight:bold ;}.amaran {font-weight:italic;}.penting.warning {background:silver;}

2 Dengan memautkan dua pemilih kelas, Hanya elemen yang mengandungi kedua-dua nama kelas ini boleh dipilih (dalam sebarang susunan).

Jika pemilih berbilang kelas mengandungi nama kelas yang tiada dalam senarai nama kelas, perlawanan akan gagal. Sila lihat peraturan di bawah:

Salin kod


Kod adalah seperti berikut:

.penting .urgent {latar belakang :perak;}
Seperti yang dijangka, pemilih ini hanya akan memadankan elemen p yang atribut kelasnya mengandungi perkataan penting dan mendesak. Oleh itu, jika elemen p hanya mempunyai perkataan penting dan amaran dalam atribut kelasnya, ia tidak akan sepadan. Walau bagaimanapun, ia boleh sepadan dengan elemen berikut:

Salin kod Kodnya adalah seperti berikut:

Perenggan ini adalah amaran yang sangat penting dan mendesak.