Pengumpulan CSS dan pemilih bersarang
Pengumpulan Pemilih
Andaikan anda mahu kedua-dua elemen h2 dan perenggan menjadi kelabu. Untuk mencapai matlamat ini, perkara paling mudah untuk dilakukan ialah menggunakan pengisytiharan berikut:
h2, p {color:gray;}
Tukar h2 dan p pemilih Letakkannya di sebelah kiri peraturan dan pisahkan dengan koma untuk menentukan peraturan. Gaya di sebelah kanan (warna: kelabu;) akan digunakan pada elemen yang dirujuk oleh kedua-dua pemilih ini. Koma memberitahu penyemak imbas bahawa peraturan mengandungi dua pemilih berbeza. Tanpa koma ini, makna peraturan akan berbeza sama sekali. Lihat pemilih keturunan.
Anda boleh mengumpulkan sebarang bilangan pemilih bersama-sama tanpa sebarang sekatan.
Sebagai contoh, jika anda ingin menjadikan banyak elemen berwarna kelabu, anda boleh menggunakan peraturan seperti ini:
body, h2, p, table, th, td, pre, strong , em {color:gray;}
Petua: Dengan mengumpulkan, pengarang boleh "memampatkan" jenis gaya tertentu bersama-sama, menghasilkan helaian gaya yang lebih ringkas.
Dua set peraturan berikut akan mencapai hasil yang sama, tetapi jelas yang mana satu lebih mudah untuk ditulis:
/* tiada pengelompokan */
h1 {warna :biru;} h2 {warna:biru;} h3 {warna:biru;} h4 {warna:biru;} h5 {warna:biru;} h6 {warna:biru;}
/* pengumpulan */
h1, h2, h3, h4, h5, h6 {color:blue;}
Contoh:
rreeePemilih Bersarang
Ringkasan peraturan penggunaan:
1. id bersarang kelas #myid.myclass: <p id="sp" class="myclass"></p>.
2. Satu tag elemen menggunakan berbilang kelas. .important.warning <p class="amaran penting">Berhati-hati untuk tidak memasukkan ruang. Terdapat ruang untuk menunjukkan bahawa ia boleh digunakan untuk dua kelas masing-masing.
3. Elemen kelas dalam teg id. #myid .myclass <div id="myid"><p class="myclass"></p></div>
4. p .myclass <p><span class="myclass"></span></p>
4. p #myid<p><span id="myid"></span></p>
5. .myclass span <p class="myclass"><span>dd</span></p>
6. Teg id dalam teg id #myid #myid2 <div id="myid " ><div id="myid2"></div></div>. Penggunaan id adalah serupa dengan tag elemen.
7. .myclass1 .myclass2 bermaksud dua kelas menggunakan gaya yang sama dan bukannya bersarang. Kelas juga boleh bersarang dalam kelas. Tetapi jika tiada ruang antara dua .myclasses, ini bermakna anda mempunyai kedua-dua kelas
8 Teg elemen bersarang teg elemen p span <p><span></span></p><. 🎜>
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
