伪类选择器获取ul中指定li

问题场景

​ 今天在开发中遇见一个问题，使用jsx语法开发了右键菜单，但是最后一个菜单是个二级的菜单，所以就考虑怎么获取到最后一个菜单，让它鼠标hover上去可以展示出来二级菜单（二级菜单默认是隐藏的）。

<ul id="context-menu">
    <li>context menu1</li>
    <li>context menu2</li>    
    <li>context menu3</li>    
    <li>context menu4</li>    
    <li>
		context menu5
    	<ul id="sub-context-menu">
            <li>sub context menu1</li>
            <li>sub context menu2</li>
            <li>sub context menu3</li>
            <li>sub context menu4</li>
        </ul>
    </li>
</ul>

​ 其实解决这个问题的方式有很多种，像js去捕获mouseover和mouseleave事件，来控制二级菜单的显示和隐藏。但是我也不知道像被css种草了一样，就是想用css去解决这个问题。可能个人认为能用css解决的问题就不去用js解决吧。毕竟css本身就是很强大的。

​ 既然要用css去解决这个问题了，那么就要引入两个css伪类选择器了。

伪类选择器

:last-child伪类选择器

想要选择ul li列表中的最后一个元素，可以使用:last-child伪类选择器。该选择器表示选择某个元素的最后一个子元素。例如，我们可以选取最后一个元素，给它单独设置样式。

<ul>
  <li>child 1</li>
  <li>child 2</li>
  <li>child 3</li>
  <li>last child</li>
</ul>

使用css代码选择最后一个并设置样式：

ul li:last-child {
    /* style */
    color: black;
}

:nth-last-child伪类选择器

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n可以是一个数字，一个关键字，或者一个公式。

除了使用:last-child伪类选择器，我们还可以使用:nth-last-child伪类选择器来选择ul li列表中的最后一个元素。该选择器表示选择一个元素的最后一个子元素，并且该子元素与父元素的所有子元素中是倒数第n个子元素。例如，我们可以选择列表中的倒数第二个元素：

ul li:nth-last-child(2){
    /* style */
    background: green;
}

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数。

在这里，我们为奇数和偶数的倒数li元素指定两个不同的背景颜色：

li:nth-last-child(odd){
    background:#ff0000;
}
li:nth-last-child(even){
	background:#0000ff;
}

使用公式（an+ b）描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

在这里，我们对所有索引是3的倍数的倒数顺序的li元素指定了背景颜色：

li:nth-last-child(3n+0){
	background:#ff0000;
}

问题解决

再回到我们的问题，获取最后一个一级菜单，并且在它鼠标悬浮时展示二级菜单，默认不展示二级菜单。废话不多说，直接上代码：

 /* 默认不展示 */
#second-context-menu {
    display: none; 
}
/* 鼠标悬浮最后一个菜单显示 */
#context-menu li:last-child:hover #second-context-menu {
    display: block;  
}