css родительский ребенок

Question

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

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}

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

Answer 2

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

Answer 3

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

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

и используйте селектор:

#tree.themed_tree ul li

Answer 4

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

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

эти стили будут применяться только к li, являющемуся потомком #tree, а не к другому li (являющемуся потомком #form)

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