Pemilihan Pemilihan Grup

Pemecahan Pilihan

Dengan asumsi anda ingin elemen h2 dan paragraf memiliki warna gelap. Untuk mencapai tujuannya, cara termudah adalah menggunakan pernyataan berikut:

h2, p {warna: gelap;}

Pilih pilihan pilih h2 dan p di sebelah kiri aturan, kemudian gunakan tanda koma untuk memisahkan, maka anda telah mendefinisikan aturan. gaya yang berada di sebelah kanan (warna: gelap; ) akan diterapkan ke elemen yang diacu pilihan ini. tanda koma memberitahu peramban bahwa aturan ini mengandung dua pilihan yang berbeda. tanpa tanda koma ini, arti aturan akan sangat berbeda. lihat pemilihan kakek.

Dapat menggabungkan beberapa pemilih sebanyak yang diinginkan, tanpa batasan apapun.

Contohnya, jika Anda ingin menampilkan banyak elemen dengan abu, Anda dapat menggunakan aturan seperti berikut:

body, h2, p, table, th, td, pre, strong, em {warna:abu;}

Petunjuk:Dengan pemecahan, pencipta dapat 'menyempurnakan' beberapa jenis gaya untuk mendapatkan daftar gaya yang lebih ringkas.

Dua aturan di bawah dapat memberikan hasil yang sama, tetapi dapat dengan jelas dilihat yang lebih mudah untuk ditulis:

/* no grouping */
h1 {warna:biru;}
h2 {warna:biru;}
h3 {warna:biru;}
h4 {warna:biru;}
h5 {warna:biru;}
h6 {warna:biru;}
/* grouping */
h1, h2, h3, h4, h5, h6 {warna:biru;}

Cuba Sendiri

Pemecahan mengambil beberapa pilihan yang menarik. Contohnya, semua pemecahan aturan di contoh di bawah adalah setara, setiap grup hanya menunjukkan berbagai metode pemecahan pemilih dan pernyataan:

/* group 1 */
h1 {warna:perak; latarbelakang:putih;}
h2 {warna:perak; latarbelakang:abu;}
h3 {warna:putih; latarbelakang:abu;}
h4 {warna:perak; latarbelakang:putih;}
b {warna:abu; latarbelakang:putih;}
/* group 2 */
h1, h2, h4 {warna:perak;}
h2, h3 {latarbelakang:abu;}
h1, h4, b {latarbelakang:putih;}
h3 {warna:putih;}
b {warna:abu;}
/* group 3 */
h1, h4 {warna:perak; latarbelakang:putih;}
h2 {warna:perak;}
h3 {warna:putih;}
h2, h3 {latarbelakang:abu;}
b {warna:abu; latarbelakang:putih;}

亲自试一试：

Perhatikan, di group 3 digunakan 'penggabungan pernyataan'. Kemudian kami akan memaparkan 'penggabungan pernyataan'.

Pemilihan pengepam

CSS2 memperkenalkan pemilihan baru yang ringkas - pemilihan pengepam (universal selector), dipaparkan sebagai bintang ( * ). Pemilihan ini dapat disesuaikan dengan mana-mana elemen, seperti pengepam.

Contohnya, peraturan di bawah ini akan menjadikan setiap elemen dokumen menjadi merah:

* {color:red;}

Cuba Sendiri

Pernyataan ini setara dengan mencatatkan pemilihan gabungan bagi semua elemen dokumen. Dengan pemilihan pengepam, hanya dengan menekan sekali tombol (hanya satu bintang) anda boleh menakrifkan nilai warna bagi semua elemen dokumen menjadi merah.

Penggabungan pernyataan

Kami boleh menggabungkan pemilihan dan penggabungan pernyataan.

Jika anda mahu semua elemen h1 mempunyai latar belakang merah dan digunakan huruf Verdana yang tinggi 28 piksel untuk menulis teks biru, anda boleh menulis gaya berikut:

h1 {font: 28px Verdana;}
h1 {color: biru;}
h1 {background: merah;}

walau bagaimanapun, keberkesanan cara ini tidak tinggi. Terutama apabila kita mencipta senarai seperti ini bagi elemen yang mempunyai banyak gaya. Sebaliknya, kita boleh menggabungkan pernyataan bersama-sama:

h1 {font: 28px Verdana; color: putih; background: hitam;}

Ini sama saja dengan efek 3 baris stylesheet di atas.

Perhatian, untuk menggabungkan pernyataan, pastikan digunakan tanda tanya di akhir setiap pernyataan, ini amat penting. Pemetai akan mengabaikan spasi kosong dalam stylesheet. Dengan adanya tanda tanya, anda boleh dengan selamat mengambil format berikut untuk membangunkan gaya:

h1 {
  font: 28px Verdana;
  color: biru;
  background: merah;
  }

Cuba Sendiri

Bagaimana, kebolehan bacaan yang lebih kuat bagi cara penulisan di atas?

walau bagaimanapun, jika mengekalikan tanda tanya kedua, pengguna agent akan menggambarkan stylesheet seperti berikut:

h1 {
  font: 28px Verdana;
  color: biru background: merah;
  }

Cuba Sendiri

Karna background bukan nilai yang sah bagi color, dan kerana hanya boleh ditakrifkan satu kata kerja bagi color, pengguna agent akan mengabaikan sepenuhnya deklarasi warna ini (termasuk background: hitam). Jadi tajuk h1 hanya akan dipaparkan warna biru, tanpa latar belakang merah, walaupun kemungkinan adalah bahawa tajuk h1 sama sekali tidak mendapatkan warna biru. Sebaliknya, tajuk ini hanya akan dipaparkan warna lalai (biasanya hitam), dan tiada warna latar. Deklarasi font: 28px Verdana masih berfungsi dengan baik, kerana ia benar-benar diakhiri dengan tanda tanya;.

Seperti pemilihan grup, grup deklarasi juga adalah cara yang mudah untuk membingkaskan stylesheet, membuatnya lebih jelas dan lebih mudah untuk pemeliharaan.

Petunjuk:Menambahkan tanda titik koma di belakang peraturan terakhir adalah suatu kebiasaan yang bagus. Saat menambahkan peraturan lain, jangan khawatir tentang kehilangan tanda titik koma.

Gabungan pemilihan dan deklarasi grup

Kami boleh menggabungkan pemilihan grup dan grup deklarasi dalam satu peraturan untuk mendefinisikan gaya yang kompleks dengan sedikit kalimat.

Peraturan di bawah ini akan menentukan gaya yang kompleks bagi semua tajuk:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Cuba Sendiri

Peraturan ini akan menentukan gaya semua tajuk dengan latar belakang putih dan teks abu-putih, margin dalam 10 piksel, dan garisan batas 1 piksel tebal, teks font adalah Verdana.