Có bộ chọn CSS cho con trực tiếp đầu tiên không?

Question

Tôi có html sau

<div class="section"> 
    <div>header</div> 
    <div> 
      contents 
      <div>sub contents 1</div>    
      <div>sub contents 2</div> 
    </div> 
</div> 

Và phong cách sau đây:

DIV.section DIV:first-child 
{ 
    ... 
} 

Đối với một số lý do mà tôi không hiểu được phong cách là nhận được áp dụng cho các "tiểu nội dung 1"<div> cũng như tiêu đề "<div>.

Tôi nghĩ rằng bộ chọn trên kiểu sẽ chỉ áp dụng cho con trực tiếp đầu tiên của một div với một lớp được gọi là "phần". Làm thế nào tôi có thể thay đổi bộ chọn để có được những gì tôi muốn?

Answer 1

Nội dung bạn đã đăng có nghĩa là "Tìm bất kỳ div nào nằm trong div phần và là con đầu tiên của cha mẹ". Phụ chứa một thẻ khớp với mô tả đó.

Không rõ tôi có muốn cả hai con của div chính hay không. Nếu vậy, sử dụng này:

div.section > div 

Nếu bạn chỉ muốn tiêu đề, sử dụng này:

div.section > div:first-child 

Sử dụng > thay đổi các mô tả để: "Tìm bất kỳ divs rằng là hậu duệ trực tiếp của phần divs "đó là những gì bạn muốn.

Xin lưu ý rằng tất cả các trình duyệt chính đều hỗ trợ phương pháp này, ngoại trừ IE6. Nếu hỗ trợ IE6 là nhiệm vụ quan trọng, bạn sẽ phải thêm các lớp vào các div con và sử dụng nó, thay vào đó. Nếu không, nó không đáng quan tâm.

Answer 2

div.section > div 

Answer 3

CSS được gọi là Cascading Style Sheets vì các quy tắc được kế thừa. Sử dụng bộ chọn sau đây, sẽ chọn chỉ là con trực tiếp của cha mẹ, nhưng nguyên tắc của nó sẽ thừa hưởng bởi rằng div 's trẻ em divs:

div.section > div { color: red } 

Bây giờ, cả hai rằng divvà con của nó sẽ là red. Bạn cần phải hủy bỏ ra bất cứ điều gì bạn đặt trên phụ huynh nếu bạn không muốn nó kế thừa:

div.section > div { color: red } 
div.section > div div { color: black } 

Bây giờ duy nhất mà đơn div đó là một con trực tiếp của div.section sẽ có màu đỏ, nhưng con của nó divs sẽ vẫn có màu đen.

Answer 4

Sử dụng div.section > div.

Hơn thế nữa, sử dụng một thẻ <h1> cho tiêu đề và div.section h1 trong CSS của bạn, để hỗ trợ các trình duyệt cũ (mà không biết về >) và giữ đánh dấu của bạn ngữ nghĩa.

Answer 5

Tìm thấy câu hỏi này tìm kiếm trên Google. Điều này sẽ trả về đứa con đầu tiên của một phần tử với lớp container, bất kể kiểu con là gì.

.container > *:first-child 
{ 
}