Applicare stile solo su elementi secondari nel primo livello

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> 

Come posso applicare una regola CSS solo per estendersi elementi del primo livello, e rendere elementi span dalla lista annidata ignorare la regola?

È possibile eseguire questa operazione senza reimpostare in modo specifico le proprietà negli intervalli di 2 ° livello?

provato ul > li span ma non sembra funzionare, ottengo gli stili applicati al 2 ° livello troppo

Answer 1

Metti la tua lista in un div involucro con un ID, ad esempio <div id="ul-wrapper">, e provare:

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

Answer 2

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

È necessario specificare un contenitore, in modo che sia possibile selezionare solo il primo livello ul.

Answer 3

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

Answer 4

Finché il padre del esterna ul non è un altro li, è possibile utilizzare che come punto di partenza per il selettore (ad esempio supponendo che è un div):

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