CSS na lista aninhada: evite estilizar as duas listas
Tenho a seguinte estrutura de lista aninhada:
HTML:
<div id="my_nested_list">
<ul>
<li>
Item label
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
<li>
<li>...</li>
</ul>
</div>
CSS:
#my_nested_list>ul {
/* first level list */
}
#my_nested_list>ul>li {
/* first level items */
}
#my_nested_list>ul>li ul {
/* second level list */
}
#my_nested_list>ul>li ul>li {
/* second level items */
}
Meu problema é que, com o seletor de espaço em vez de>
, as regras de primeiro nível se aplicam no segundo nível. Mas eu preciso de suporte ie6, que não suporta>
. Portanto, eu tenho que usar o espaço.
té agora eu tenho 2 soluções:
put classes em todos os ul e li e use#my_nested_list ul.firstlevel li.firstlevel
usar#my_nested_list ul li
e#my_nested_list ul li ul li
para reescrever todas as regras indesejadas de primeiro níveVocê tem idéias melhores?