我不明白为什么它可以工作 css 脚本，帮我理解？ [关闭]答案

【问题标题】：I can not understand why it works css script, help me understand? [closed]我不明白为什么它可以工作 css 脚本，帮我理解？ [关闭]
【发布时间】：2014-03-05 02:07:44
【问题描述】：

帮助我理解这段代码： 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> ul”行，只有元素2.1 - 2.3才可见？

【问题讨论】：

到底是什么问题？
问题是：当我将鼠标悬停在 2.3 -> 可见 2.3.1 ... 为什么？ "nav ul li:hover > ul" 这是唯一的 ul-li-a-2.3 而不是 2.3.1...我误解了什么？
nav ul li:hover > ul 表示要显示作为悬停在列表项的子项上的无序列表元素（它是无序列表的后代，它是导航元素的后代）。

标签： css

【解决方案1】：

我认为是这样的：

nav ul ul{
    display: none;
}

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

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

意味着当<ul> 和<nav> 中的<li> 元素悬停在上面时，它会告诉<ul> 元素（可能只有其中的一个）显示为块元素。

工作示例here

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

希望这会有所帮助...

【讨论】：

我的天啊，如果我没听错的话，“nav ul”中的所有“li”在悬停时都将可见...谢谢！
差不多 - 刚刚找到 this，如果它更清楚 - 如果这有足够的帮助，您可能希望将您的问题标记为已回答。
查看我的答案以获取 CSS 选择器上的 CSS3 WIKI 链接以及后代组合器和直接后代组合器的使用。

【解决方案2】：

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

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

给定这个选择器...nav ul li:hover > ul {} 你可以详细地说：将这些属性应用到一个UL 元素，该元素是任何 LI 元素的直接后代，该元素被悬停是 any UL 元素的后代，它是 any NAV 元素的后代。

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

如果你改为写：

nav > ul > li:hover > ul {}

那么您的 2.3.1 LI 将不再可见，因为我们在导航中专门选择了第二级 UL 元素，而不是作为 LI 一部分的任何 UL。

【讨论】：