CSS子选择器

我理解孩子和后代之间的区别就好了.但是,我遇到了子选择器的问题.也许我没有正确理解.以下面的 HTML为例.这是一个3层导航菜单.

<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中的子(>)选择器的理解,以下情况将是如此：

#nav {}
#nav ul.menu {}
#nav ul.menu > li {} /* main navigation items only */
#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */
#nav ul.menu > li > ul.sub-menu ul.sub-menu {} /* the 3rd tier only */

然而,情况似乎并非如此.第二层的css也适用于第三层.只有使用！important声明,我才能覆盖最后一个css定义中的第二层.

合理？

nav ul.menu > li {} /* main navigation items only */

正确

#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */

错误 – 您正在选择具有子ul.sub-menu的ul.menu子li,其下包含所有li元素.

如果您只想将其限制为该级别,请使用以下命令：

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

最后一个

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

只要你把它保持在3层,它应该可以正常工作.