CSS 子选择器

Question

我很清楚 child 和后代之间的区别。但是，我对子选择器有疑问。也许我没有正确理解某些东西。以下面的 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 定义中的第二层。

有道理吗？

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 层即可正常工作。