Descendant combinator
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Bộ kết hợp hậu duệ — thường được biểu diễn bằng một ký tự khoảng trắng (" ") — kết hợp hai bộ chọn sao cho các phần tử khớp với bộ chọn thứ hai được chọn nếu chúng có phần tử tổ tiên (cha, cha của cha, cha của cha của cha, v.v.) khớp với bộ chọn đầu tiên. Các bộ chọn sử dụng bộ kết hợp hậu duệ được gọi là bộ chọn hậu duệ.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
Về mặt kỹ thuật, bộ kết hợp hậu duệ là một hoặc nhiều ký tự khoảng trắng CSS — ký tự khoảng trắng và/hoặc một trong bốn ký tự điều khiển: ký tự xuống dòng, cấp trang, dòng mới và ký tự tab — giữa hai bộ chọn khi không có bộ kết hợp nào khác. Ngoài ra, các ký tự khoảng trắng tạo thành bộ kết hợp có thể chứa bất kỳ số lượng nhận xét CSS nào.
Cú pháp
selector1 selector2 {
/* property declarations */
}
Ví dụ
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
HTML
<ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul>
Kết quả
Đặc tả
| Specification |
|---|
| Selectors Level 4 # descendant-combinators |