Aplicar estilo solo en elementos secundarios en el primer nivel

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> 

¿Cómo puedo aplicar una regla CSS solo para abarcar elementos del primer nivel y hacer que los elementos span de la lista anidada ignoren la regla?

¿Se puede hacer esto sin restablecer específicamente las propiedades en los tramos de segundo nivel?

Probamos ul > li span pero no parece que trabajar, tengo la segunda estilos aplicados a nivel demasiado

Answer 1

Ponga su lista en un div envolver con un ID, por ejemplo <div id="ul-wrapper">, y tratar:

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

Answer 2

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

Es necesario especificar un contenedor, de modo que solo se pueda seleccionar el primer nivel ul.

Answer 3

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

Answer 4

Mientras el padre del exterior ul no es otra li, se puede usar eso como el punto de partida para su selección (ejemplo asumiendo que es un div):

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