CSS子选择器

Question

我理解孩子和后代之间的区别就好了.但是,我遇到了子选择器的问题.也许我没有正确理解.以下面的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中child(>)选择器的理解,以下情况将是正确的:

#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定义中的第二层.

合理？

Answer 1

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

正确

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

错了 -你选择ul.menu孩子li其中有孩子ul.sub-menu,所有的li在它之下的元素.

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

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

最后一个

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

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