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