CSS "#id element" có chọn cả cháu không?

Question

Giả sử tôi có một số <div id="container"> với các thành phần khác nhau bên trong bao gồm cả bảng. Bộ chọn CSS #container table có chọn tất cả các bảng trong div (bao gồm cả cháu, chắt, v.v ...) không? Hay nó chỉ chọn trẻ em?

Ngoài ra, nếu tôi muốn chọn div con đầu tiên trong div vùng chứa, tôi sẽ làm điều đó như thế nào?

Answer 1

Có; để đơn giản, chọn tất cả các yếu tố table trong phạm vi #container, bất kể mức lồng nhau.

Không gian được gọi là descendant combinator. Như chính xác những gì nó nói trên tin, nó chọn bất kỳ hậu duệ nào. Điều đó bao gồm trẻ em, cháu, vv, một lần nữa bất kể mức độ làm tổ. Nó không chỉ chọn trẻ em; mục đích đó được phục vụ bởi child combinator >.

Để chọn đứa con đầu lòng trong container của bạn như một div, bạn sử dụng

#container > div:first-child 

Hoặc nếu bạn có cái gì khác là đứa con đầu lòng và bạn muốn chọn đứa trẻ đầu tiên đó là các loại div, bạn sử dụng

#container > div:first-of-type 

---

_{Vì mục đích này, người ta thường chỉ chọn "trẻ em trực tiếp" và nơi mọi người nói "trẻ em" chúng thường có nghĩa là "hậu duệ" thay thế. Nói đúng ra, mặc dù, "trẻ em" đề cập đến cấp độ làm tổ ngay lập tức. Không có thứ gì như "đứa trẻ gián tiếp".}

Answer 2

#container table 

chọn tất cả các hậu duệ có bảng.

#container > table 

chọn tất cả các trẻ em là bảng.

Answer 3

Ngoài ra, nếu tôi muốn chọn div con đầu tiên trong vùng chứa div, tôi sẽ làm như thế nào?

#container > div{} 

Answer 4

#container table sẽ chọn tất cả các yếu tố table được bên trong của phần tử #container, bất kể có bao sâu trong cây DOM họ đang có. Nếu bạn chỉ muốn nhắm mục tiêu các yếu tố cấp đầu tiên, bạn sẽ sử dụng điều này: #container > table

Để chọn div con đầu tiên trong phần tử vùng chứa, bạn sẽ làm như sau: #container > div:first-child cấp độ con đầu tiên div. Hoặc, nếu bạn muốn nhắm mục tiêu tất cả các phần tử div đầu tiên trong container, bạn muốn sử dụng #container div:first-child

này chỉ có hiệu lực nếu div thực sự là đứa con đầu lòng của nguyên tố đó

<div id="container"> 
    <div>some content</div> 
</div> 

như vậy, ví dụ không được có bất kỳ thẻ nào p trước thẻ đó (hoặc bất kỳ thẻ nào khác).

<div id="container"> 
    <p>Some text</p> 
    <div>some content</div> 
</div> 

Nếu div không phải là đứa trẻ đầu tiên, bạn sẽ cần phải làm như sau: #container div:first-of-type