Lỗi thường gặp của người mới với bộ chọn hậu duệ

Hãy xem bộ chọn sau:

p.eee {
	color: red;
}

Bạn đã phải biết rằng bộ chọn như vậy sẽ chọn các đoạn văn có lớp eee. Ví dụ, những cái này:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Bây giờ hãy xem bộ chọn này:

p .eee {
	color: green;
}

Bộ chọn này khác với bộ chọn trước ở chỗ, giữa tên thẻ và tên lớp có một dấu cách. Dấu cách này đại diện cho bộ chọn hậu duệ. Tức là trong trường hợp này chúng ta đang chọn tất cả các phần tử có lớp eee, nằm bên trong các đoạn văn. Ví dụ, bộ chọn này sẽ chọn các thẻ span sau:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Kết quả thực thi mã:

Vậy, một lần nữa: p.eee - bộ chọn như vậy chọn các đoạn văn có lớp eee. Còn nếu tôi làm như thế này: p .eee, thì tôi sẽ chọn tất cả các phần tử có lớp eee, nằm bên trong các đoạn văn. Hãy cảm nhận sự khác biệt này.

Hãy cho biết bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:

p.bbb {
	color: red;
}

Hãy cho biết bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:

p .bbb {
	color: red;
}

Hãy cho biết bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:

.eee p.bbb {
	color: red;
}

Hãy cho biết bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:

.eee p .bbb {
	color: red;
}