CSS - chỉ nhắm mục tiêu một lớp sâu

Question

Tôi đang làm việc với Sharepoint vào lúc này và để nói rằng cấu trúc/bố cục mã của nó là một mớ hỗn độn sẽ là một sự đánh giá rất lớn. Nó có một điều hướng bên trái và tôi muốn tất cả các mục trong đó được tạo kiểu với một div xung quanh chúng (tôi muốn nhắm mục tiêu riêng lẻ, nhưng Sharepoint có hàng trăm tiện ích mỗi lớp với tên riêng), ví dụ:

<div id="leftNav"> 
    <div id="widget1"> 
     <div></div> 
     <div></div> 
    </div> 
    <div id="widget2"> 
     <div></div> 
     <div></div> 
    </div> 
</div> 

Tôi đã thử #leftNav div { } nhưng cũng nhắm mục tiêu các div phụ (và div phụ của các div đó) - có cách nào để chỉ nhắm mục tiêu div 'tiện ích' không?

Cảm ơn!

Answer 1

Sử dụng các combinator con trực tiếp, >:

#leftNav > div { 
    /* ... */ 
} 

Answer 2

Bạn có thể sử dụng để nhắm mục tiêu child selector con trực tiếp của các yếu tố.

#leftNav > div