Ralat ketika Mengelompokkan Pemilih CSS yang Kompleks

Semua yang dipisahkan oleh koma ketika pengelompokan, harus mewakili pemilih yang lengkap. Mari kita lihat di mana kesalahan boleh berlaku di sini.

Katakanlah kita mempunyai kod seperti berikut:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

Mari kita kumpulkan dua pemilih menjadi satu. Berikut adalah varian pengelompokan yang betul:

#block h2, #block h3 {
	color: red;
}

Dan berikut adalah varian pengelompokan yang tidak betul:

#block h2, h3 {
	color: red;
}

Dalam varian pengelompokan yang tidak betul ini, pemula entah mengapa berfikir bahawa #block merujuk kepada kedua-dua h2 dan h3 yang berada selepas koma. Tetapi pemilih tidak berfungsi melalui koma dan sebenarnya varian yang tidak betul ini boleh ditulis semula seperti berikut:

#block h2 {
	color: red;
}
h3 {
	color: red;
}

Bandingkan dengan varian asal yang kita mula pendekkan:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

Permudahkan kod dengan menggunakan pengelompokan pemilih:

#block h1 {
	text-align: center;
}
#block h2 {
	text-align: center;
	color: blue;
}
#block h3 {
	text-align: center;
	font-size: 16px;
	color: red;
}

Permudahkan kod dengan menggunakan pengelompokan pemilih:

#block h1.eee {
	text-align: center;
	font-size: 30px;
}
#block h2.zzz {
	text-align: center;
	font-size: 20px;
}

Permudahkan kod dengan menggunakan pengelompokan pemilih:

.xxx .kkk {
	text-align: center;
}
.eee h2.zzz {
	text-align: center;
}
#eee h2 {
	text-align: center;
}

Permudahkan kod dengan menggunakan pengelompokan pemilih:

.eee h2.zzz {
	text-align: center;
}
.xxx {
	text-align: center;
}