css - CSS 中的 .current-item 选择器

Question

我对这个 CSS 片段有点困惑:

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

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

但是第二部分呢？

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

提前致谢!

Answer 1

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