Nhiều bộ chọn viết liền nhau trong CSS
Để chọn một phần tử đồng thời thỏa mãn nhiều bộ chọn, bạn cần viết những bộ chọn này liền nhau, không có khoảng trắng.
Ví dụ, bộ chọn sau sẽ chọn phần tử
đồng thời có lớp bbb và lớp
zzz:
.bbb.zzz {
}
Còn bộ chọn sau sẽ chọn tiêu đề h2,
đồng thời có lớp bbb và lớp
zzz:
h2.bbb.zzz {
}
Bằng cách đã chỉ định, bạn có thể xây dựng các cấu trúc bộ chọn tùy ý. Thứ tự của các bộ chọn được sử dụng không quan trọng, ngoại trừ quy tắc là bộ chọn thẻ cần đặt ở ngay đầu.
Tức là, ví dụ, các bộ chọn .bbb.zzz
và .zzz.bbb hoàn toàn tương đương.
Ngoài ra, bạn có thể tạo các bộ chọn với
việc sử dụng id, ví dụ như:
#elem.eee, hoặc h2#elem.eee,
hoặc h2.eee#elem, v.v.
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn phần tử nào. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã có bộ chọn:
.bbb.zzz {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn phần tử nào. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã có bộ chọn:
h2.bbb.zzz {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn phần tử nào. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã có bộ chọn:
#elem.bbb {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn phần tử nào. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã có bộ chọn:
#elem.bbb.zzz {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn phần tử nào. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã có bộ chọn:
h2#elem.bbb {
color: red;
}
