css父母

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里面的#tree，第二个选择器仍然适用于页面上任何其他树。

Answer 2

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

Answer 3

如果你没有退出IE 6，你可以使用CSS3儿童组合器

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

这些样式只适用于#tree的大孩子li而不适用于其他li（这是#form的大孩子）

希望这会有所帮助

Answer 4

在树上放一个课

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

并使用选择器：

#tree.themed_tree ul li