CSS中的.current-item选择器

Question

我对这个css片段感到有些困惑：

.menu li:hover > a, .menu .current-item > a {
  text-decoration: none;
  color: #be5b70;
}

如果我理解正确，第一部分将选择悬停列表项的所有子锚（列表项必须在类菜单的元素内）。

但是第二部分呢？

为什么需要两者？我尝试删除第二部分，但没有注意到最终结果的任何差异。

提前致谢！

Answer 1

逗号（，）分隔两个选择器。 第一个选择器.menu li：hover将从菜单中选择悬停列表项。 第二个选择器.menu .current-item将选择当前突出显示的菜单项。这在用户不使用鼠标而是使用键盘进行导航的情况下非常有用。在这种情况下，用户不会将鼠标悬停在列表项上。

Answer 2

后代选择器（>）仅选择直接子项。

Answer 3

两个选择器之间的空格如.a .b描述的那样，右边的元素位于左边的元素下，但不是它的直接子节点。

>之类的两个选择器之间的大于.a > .b符号表示，右元素是左元素的直接子元素。 （正如@kelly所说）

逗号,，如.a .b, .a .c，可以使用相同的CSS规则拆分两个或更多不同的选择器。

更新

对不起，空间描绘的是直接儿童和儿童。直接的孩子。特别感谢 @torazaburo 。