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中的子（＆gt;）选择器的理解，以下情况属实：

#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的{{1}}子li，其中包含所有ul.sub-menu元素。

如果您只想将其限制在该级别，请使用：

li

最后一个

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

只要你只保留3层就可以正常工作。

Answer 2

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

将适用于2级及以上。

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

仅适用于第二层......

Answer 3

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

最后一个ul.sub-menu li选择器选择第二层中的子 li元素和第三层中的后代 li层。

#nav ul.menu > li > ul.sub-menu > li {} //可能会强制它限制为第二层

另外，根据http://www.evotech.net/blog/2008/05/browser-css-selector-support/对'E＆gt;的支持在IE6中，F'选择器有点小问题，对你来说可能不是问题。

CSS子选择器

3 个答案: