CSS子选择器

我完全理解孩子和后代之间的区别。但是，我对子选择器有问题。也许我没有正确地理解某些事情。以下面的HTML为例。这是一个三层导航菜单

<div id="nav">
    <ul class="menu">
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a>
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 3</a></li>
    </ul>
</div>

然而，情况似乎并非如此。第二层的css也应用于第三层。并且只使用

！重要信息

声明我是否能够覆盖最后一个css定义中的第二层

有意义吗？

nav ul.menu>li{}/*仅限主要导航项*/

正确

#nav ul.menu>li>ul.sub-menu li{}/*仅第二层*/

错误-您正在选择

ul.菜单

child

li

，该菜单包含child

ul.子菜单

，其下的所有

li

元素

如果只想将其限制在该级别，请使用以下命令：

#nav ul.menu>li>ul.sub-menu>li{}

最后一个

#nav ul.menu>li>ul.sub-menu ul.sub-menu{}

只要你把它放在3层就可以了

#nav ul.menu > li > ul.sub-menu li {}

将适用于2层及以上

#nav > ul.menu > li > ul.sub-menu > li {}

仅适用于第二层…

#nav ul.menu>li>ul.sub-menu li{}

//第二层

最后一个

ul.子菜单li

选择器选择第二层的子

li

元素和第三层的Decentant

li

#nav ul.menu>li>ul.sub-menu>li{}

//可能会强制它限制到第二层

---

另外，根据对“E>F”选择器的支持，IE6中有一个小错误，这对您来说可能不是问题。

我的一个小疏忽。这很有道理。谢谢@克里斯：没问题。至少您可以奢侈地使用

子选择器。。。仍然坚持自己在支持IE6的网站上工作：（是的，我很久以前就放弃了为IE6编码。支持它就是启用它。谢谢你的回答。啊，比我想象的还要糟糕；）