Chỉ áp dụng kiểu cho các phần tử con ở cấp độ đầu tiên

Question

<ul> 
    <li> <span> apply </span> </li> 
    <li> <span> apply </span> </li> 
    <li> 
    <ul> 
     <li> <span> ignore </span> </li> 
     <li> <span> ignore </span> </li> 
    </ul> 
    </li> 
</ul> 

Làm cách nào để áp dụng quy tắc CSS cho các phần tử span từ cấp thứ nhất và tạo các phần tử span từ danh sách lồng nhau bỏ qua quy tắc?

Điều này có thể được thực hiện mà không cần đặt lại cụ thể các thuộc tính trên các nhịp cấp 2 không?

Cố gắng ul > li span nhưng nó dường như không làm việc, tôi nhận được những phong cách áp dụng cho cấp 2 quá

Answer 1

Đặt danh sách của bạn trong một gói div với một ID, ví dụ <div id="ul-wrapper">, và cố gắng:

#ul-wrapper > ul > li > span { 
    /* my specific CSS */ 
} 

Answer 2

#container > ul > li span { /* - Your CSS Here - */ } 

Cần chỉ định vùng chứa để chỉ có thể chọn ul cấp đầu tiên.

Answer 3

ul > li > span {border:solid 1px red;} 
li > ul > li > span {border:none 1px red;}; 

Answer 4

Chừng nào cha mẹ của các bên ngoài ul không phải là li khác, bạn có thể sử dụng như là điểm khởi đầu cho chọn của bạn (ví dụ giả định đó là một div):

div > ul > li span { 
    /* Whatever */ 
}