css parent child

Question

У меня есть моя форма внутри <ul><li> и отлично работает при использовании элементов ярлыка и формы.

CSS-за формы не просто: (объяснять не надо)

#form ul {....} 
#form ul li {....} 

Моя проблема в том, что теперь, вместо того, чтобы нарисовать элемент формы, я хочу нарисовать дерево с помощью <ul><li>

<li> 
    <label>Parent Category</label> 
    <div> 

     // ... draw TREE here 
    </div> 
</li> 

Но мой CSS выглядит как #form ul li {....}, что означает, что это повлияет на <ul><li>, что и у меня для дерева.

Если я использую #form ul>li {....} для стилей только прямых детей, он не работает в IE6.

Одним из решений здесь является использование #tree ul li {}, чтобы отменить стиль, который мне не нужен, от #form ul>li {}. Но #tree ul li {} - это то, что я также буду использовать в тех местах, где не нужно отменять стили #form ul li {}.

Есть ли какие-либо другие решения, которые я могу применить, так что #form ul li и #tree ul li не зависят друг от друга?

Надеюсь, мой вопрос ясен.

Благодаря

Answer 1

Почему бы не сделать 2 селекторы:

#form ul li .tree ul li, .tree ul li {style here} 

Таким образом, первый селектор влияет на внутри #form Дерево папок и второй будет по-прежнему работают на любое другое дерево, где бы ни было на странице.

Answer 2

если вы нормально с оставлением из IE 6, вы можете использовать CSS3 ребенка комбинаторы

#tree > ul >li {put your styles here} 

эти стили будут применяться только к литий, который является гранд-ребенок Дерево папок а не другой ли (что является гранд-ребенок #form)

надеюсь, что это помогает

Answer 3

Положите класс на дереве

<div id="tree" class="themed_tree"> ... </div> 

и использовать селектор:

#tree.themed_tree ul li 

Answer 4

#form ul li div ul{---cancel styles---} 
#form ul li div ul li{---cancel styles---}