CSS子选择器

Question

CSS子选择器

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定义中覆盖第二层。

明白了吗？

- Chris

3个回答

1

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

将适用于2层及以上。

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

仅适用于第二层...

- Ian Wood

1

#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/，在IE6中支持“E>F”选择器有些问题，这可能对您没有影响。

- benosteen

是的，很久以前我放弃了为IE6编码。支持它就是在使它存在。感谢您的回答。 - Chris

啊，比我预料的还要糟糕啊 ;) - benosteen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niklas · Accepted Answer

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 {}

只要您将它保持在三层结构中，它应该可以正常工作。