Question

帮我理解这段代码：的 CSS

nav ul ul{
    display: none;
}
nav ul li:hover > ul {
    display:block;
}

HTML

<nav>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a>
            <ul>
                <li><a href="#">2.1</a></li>
                <li><a href="#">2.2</a></li>
                <li><a href="#">2.3</a>
                    <ul>
                        <li><a href="#">2.3.1</a></li>
                        <li><a href="#">2.3.2</a></li>
                    </ul>   
                </li>
            </ul>   
        </li>
        <li><a href="#">3</a>
            <ul>
                <li><a href="#">3.1</a></li>
                <li><a href="#">3.2</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>
</nav>

问题： 为什么当你悬停鼠标时可以看到（2.3）元素“2.3.1 - 2.3.2”我想根据“nav ul li：hover＆gt; ul”这一行，只有元素2.1 - 2.3会变得可见？

Answer 1

我想这个：

nav ul ul{
    display: none;
}

使用display property告诉<ul>内的<ul>元素和<nav>元素不显示。那么这个

nav ul li:hover > ul {
    display:block;
}

表示当<li>和<ul>中的<nav>元素悬停在其上时，它会告诉<ul>元素，可能只有内部的元素显示为块元素。

工作示例here

空格分隔CSS here的示例，以及:hover here的使用。

希望这会有所帮助......

Answer 2

这一切都与CSS组合器有关。您可以在所有CSS3选择器和组合器上找到信息here。

这里讨论的两个组合器是“”（或空格）和“＆gt;”字符。 [space]组合子被称为后代组合子。 “＆gt;”符号被称为直接后代组合符。

鉴于此选择器... nav ul li:hover > ul {}，您可以详细说：将这些属性应用于任何 UL元素的直接后代的LI元素正在悬停，它是 任何 UL元素后代的任何 NAV元素的后代。

上面的选择器因此适用于您的2.3.1例如。

如果您改为写道：

nav > ul > li:hover > ul {}

然后你的2.3.1 LI将不再可见，因为我们特别选择导航中的第二级UL元素，而不是任何属于LI的UL。

我无法理解为什么它的css脚本有用，帮我理解？

2 个答案: