pemilih kelas

Pemilih kelas membolehkan anda menggayakan gaya secara bebas daripada elemen dokumen

Sebagai contoh: .class{} (perhatikan bahawa ia bermula dengan titik, yang merupakan tanda pemilih kelas, diikuti dengan nama Atribut, tetapan khusus adalah dalam kurungan kerinting)

Mari kita ambil contoh mudah:

fail html:

<div class="div">
    php中文网
</div>

fail css:

.div{color: cadetblue;
}

Dengan cara ini, kesan tersuai boleh dicapai:

Kami juga telah menyentuhnya sebelum ini, menggunakan pemilih kelas yang digabungkan dengan pemilih elemen Tambah satu lagi di bawah:

<h1 class="div">php中文网</h1>

Sekarang kami akan mengubah suai fail css seperti berikut:

h1.div{color: cadetblue;
}

Seperti ini Selepas menambah penerangan elemen di hadapan pemilih kelas, .div ini hanya akan berfungsi pada h1.

Mari kita lihat kesan khusus:

Apa yang akan kita bincangkan seterusnya ialah pemilih berbilang kelas: .class.class{} Kami tidak pernah menyentuh perkara ini sebelum ini. Mari kita rasakannya semasa menulis: Fail html menyenaraikan beberapa medan p , Ia adalah mudah untuk membandingkan kemudian:

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>

fail css tidak mempunyai pemilih untuk mengubah suai satu tetapan, satu warna biru dan hitam, saiz fon kedua ialah 20px, gaya fon ketiga adalah condong:

.p1{    color: cadetblue;
}.p2{    font-size: 20px;
}.p3{    font-style: italic;
}

Berikut ialah tangkapan skrin kesan:

Sekarang kita akan menggunakan pemilih berbilang kategori:

Di sini kita hanya perlu menambah fail css Cuma tukar p3 kepada .p1.p2 Selain itu, ubah suai kelas tag p ketiga apabila memetik dalam html: css:

.p1.p2{    font-style: italic;
}

html:

<p class="p1 p2">php中文网</p>

Berikut ialah gambar hasil:

Di sini kita lihat bahawa perenggan ketiga mempunyai pengubahsuaian kepada warna p1, saiz fon p2, dan italiknya sendiri. Ini adalah aplikasi pemilih berbilang kategori.