Solucionado
Olá.
No teste que fiz, utilizando o sinal > selecionei todos os elementos, inclusive os da sublistas, ao contrário do resultado do exercício.
Segue código:
<!DOCTYPE html>
<html>
<head>
<style>
ul > li{
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Item da lista
<li>
<ol>
<li>Item da sublista
<li>Item da sublista
</ol>
<li>Item da lista
<li>Item da lista
</ul>
</body>
</html>Onde errei?
Entao, na verdade o codigo funcionou sim, mas de um jeito estranho que confundiu tudo.
Quando fazemos ul > li ele seleciona apenas os <li> imediatamente filhos do <ul> e isso exclui os <li> de dentro. O seletor esta funcionando.
Maaasss como estamos fazendo background-color, ele pinta o li do ul. E como o ol esta dentro de um li do ul, ele acaba pintado tbm. Mas nao pq o seletor pegou ele, mas sim pq o pai dele foi pintado entao ele fica com cor tbm.
Um jeito mais facil de perceber o problema seria usando um border. Repara que so os LI do UL recebem a borda:
Nossa! Realmente, agora tudo ficou claro para mim.
Obrigado cara!