Pemilihan Pemilihan Grup

Pengelompokan Selector

Jika ingin elemen h2 dan paragraf memiliki warna abu-abu, cara paling mudah adalah menggunakan pernyataan berikut:

h2, p {color:gray;}

Tempatkan selector h2 dan p di sisi kiri aturan, kemudian gunakan tanda koma untuk memisahkan, maka anda telah mendefinisikan aturan. gaya yang berada di sisi kanan (color:gray;) akan diterapkan ke elemen yang diacu oleh selector ini. Tanda koma memberitahu browser bahwa aturan ini mengandung dua selector yang berbeda. Jika tidak ada tanda koma ini, makna aturan akan sangat berbeda. Lihat selector pewarisan.

Dapat mengelompokkan banyak pemilih bersamaan, tanpa batasan apapun.

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

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

}Dengan pengelompokan, penulis dapat 'menyempurnakan' gaya untuk jenis tertentu, sehingga dapat mendapatkan tabel gaya yang lebih sederhana.

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;}

}

Pengelompokan menyediakan pilihan menarik. Contohnya, semua aturan yang dijelaskan di bawah adalah ekuisi, setiap grup hanya menunjukkan berbagai metode untuk mengelompokkan pemilih dan deklarasi:

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

ujian sendiri:

Perhatikan, di group 3 digunakan 'pengelompokan deklarasi'. Kita akan mengenalkan 'pengelompokan deklarasi' nanti.

Selector Wildcard

CSS2 memperkenalkan selector baru yang sederhana - selector umum (universal selector), yang ditampilkan sebagai tanda asterisk (*). Selector ini dapat cocok dengan semua elemen, seperti sebuah wildcard.

Contohnya, aturan berikut dapat membuat semua elemen dalam dokumen menjadi merah:

* {color:red;}

}

Deklarasi ini setara dengan menampilkan selector grup selector untuk semua elemen dalam dokumen. Dengan selector umum, hanya perlu menekan tombol sekali (hanya satu tanda asterisk) untuk menentukan nilai atribut color semua elemen dalam dokumen menjadi merah.

Pengelompokan Deklarasi

Kita dapat mengelompokkan selector dan deklarasi.

Jika Anda ingin semua elemen h1 memiliki latar belakang merah dan menampilkan teks biru dengan font Verdana tinggi 28 poin, Anda dapat menulis gaya berikut:

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

Namun, metode ini tidak efisien. Khususnya, ketika membuat daftar seperti ini untuk elemen yang memiliki banyak gaya, hal ini akan berat. Sebaliknya, kita dapat mengelompokkan deklarasi bersama-sama:

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

Ini sama dengan efek 3 baris stylesheet sebelumnya.

Perhatikan, untuk mengelompokkan deklarasi, pastikan untuk menggunakan tanda titik koma di akhir setiap deklarasi, ini sangat penting. Peragian akan mengabaikan spasi kosong di dalam stylesheet. Dengan adanya tanda titik koma, dapat dengan berantai mengadopsi format berikut untuk membangun gaya:

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

}

Bagaimana, keterbacaan penulisan di atas adalah yang lebih kuat?

Tapi, jika mengabaikan tanda titik koma kedua, peragian pengguna akan mengartikan stylesheet seperti berikut:

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

}

Karena background bukan nilai yang sah bagi color, dan karena hanya dapat menentukan kata kunci bagi color, peragian pengguna akan mengabaikan penuh deklarasi color ini (termasuk bagian background: hitam). Hal ini membuat judul h1 hanya ditampilkan dalam warna biru, tanpa latar belakang merah, meski lebih mungkin untuk mendapatkan judul h1 yang sama sekali tidak berwarna biru. Sebaliknya, judul ini hanya ditampilkan dalam warna standar (biasanya hitam), dan tanpa warna latar belakang. Deklarasi font: 28px Verdana masih bekerja dengan baik, karena ia benar-benar berakhir dengan tanda titik koma.

与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。

}Dengan hal yang sama seperti grup pemilihan, grup deklarasi adalah metode yang mudah untuk memperpendek stylesheet, membuatnya lebih jelas dan lebih mudah dipekerjaan.

Panduan:

Menambahkan tanda titik koma di belakang pernyataan terakhir di aturan adalah hal yang baik. Saat menambahkan pernyataan lain ke aturan, tak perlu khawatir tentang kehilangan tanda titik koma.

Kami dapat menggabungkan grup pemilihan dan grup deklarasi dalam satu aturan untuk mendefinisikan gaya yang kompleks dengan sedikit pernyataan.

Aturan berikut akan menentukan gaya yang kompleks bagi semua judul:
  h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;

}

Coba Sendiri