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.
