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.firstlevelusar#my_nested_list ul li e#my_nested_list ul li ul li para reescrever todas as regras indesejadas de primeiro níve

Você tem idéias melhores?

questionAnswers(2)

yourAnswerToTheQuestion