Question

如何阅读.nav-menu li:hover ul之类的语法？
它与.nav-menu li ul:hover有什么不同？
我已经搜索过w3schools，但所有的例子都是后一种类型。谁能解释一下？以下是我为创建下拉子菜单而实施的代码。

HTML

<ul class="nav-menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Retrievals</a>
    <ul class="dropdown-menu">
       <li><a href="#">Data Listing</a></li>
       <li><a href="#">Web Scheduling</a></li>
       <li><a href="#">Google Maps Application</a></li>
    </ul>         
 </li>
 <li><a href="#">Reporting</a></li>

CSS：

.nav-menu li    
{
    width: 150px;  
    float: left;  
}
.nav-menu li ul 
{
    display: none;  

}               
.nav-menu li:hover ul   
{
    display: block; 
}

Answer 1

.nav-menu li:hover ul

无序列表
是悬停列表项的后代
是元素的后代，该元素是nav-meny类的成员

.nav-menu li ul:hover

一个悬停的无序列表
是列表项的后代
是元素的后代，该元素是nav-meny类的成员

您不太可能注意到您的特定HTML存在任何实际差异，因为您拥有的包含无序列表的唯一列表项除了单个无序列表外不包含任何内容。

Answer 2

第一条规则：.nav-menu li:hover ul在您将父ul悬停后，将{css}应用于li。

第二条规则：.nav-menu li ul:hover在您悬停ul元素后将{css}应用于ul。

如何在css中阅读这个悬停语法？

2 个答案: