Lỗi khi nhóm các bộ chọn CSS phức tạp

Tất cả những gì được phân tách bằng dấu phẩy khi nhóm, phải đại diện cho một bộ chọn hoàn chỉnh. Hãy cùng xem chỗ nào có thể mắc lỗi.

Giả sử chúng ta có đoạn mã như sau:

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

Hãy nhóm hai bộ chọn thành một. Đây là cách nhóm đúng:

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

Và đây là cách nhóm sai:

#block h2, h3 {
	color: red;
}

Trong cách nhóm sai này, người mới vì lý do nào đó lại nghĩ rằng #block áp dụng cho cả h2 và h3 đứng sau dấu phẩy. Nhưng các bộ chọn không có tác dụng thông qua dấu phẩy và thực tế cách nhóm sai này có thể được viết lại như sau:

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

Hãy so sánh với phiên bản ban đầu mà chúng ta đã bắt đầu rút gọn:

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

Hãy đơn giản hóa mã, sử dụng nhóm các bộ chọn:

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

Hãy đơn giản hóa mã, sử dụng nhóm các bộ chọn:

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

Hãy đơn giản hóa mã, sử dụng nhóm các bộ chọn:

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

Hãy đơn giản hóa mã, sử dụng nhóm các bộ chọn:

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