仅限 4 到 7 种类型

Question

我正在尝试为我的菜单导航栏创建一个悬停：之前和一个悬停：之后。菜单包含 7 项：

菜单 1、菜单 2、菜单 3（这些将使用悬停：之前）

徽标位于中间（代替菜单 4）

菜单 5、菜单 6、菜单 7（这些将使用悬停：之后）

我可以像这样从 1 到 3 中选择菜单：

menu:hover:nth-of-type(-n+3)::before {background:red}

但是我该如何从 5 到 7 中进行选择呢？

我正在尝试这样：

menu:hover:nth-of-type(5+-n)::after {background:green}

还尝试了（5,6,7），（5-7），但我不明白这是如何完成的。 我尝试在这里寻找以前问题的答案，但找不到这个具体案例的答案。

有什么想法吗？

编辑： 这是 HTML

<nav role="navigation">
<menu><a href="#">1</a></menu>
<menu><a href="#">2</a></menu>
<menu><a href="#">3</a></menu>
<menu>
<logo><img src="logo.png"></logo>
<slogan>slogan here</slogan>
</menu>
<menu><a href="#">5</a></menu>
<menu><a href="#">6</a></menu>
<menu><a href="#">7</a></menu>
</nav>

Answer 1

对于 5 到 7，请使用

:nth-of-type(n+5)

示例

menu:hover:nth-of-type(-n+3) {
  background: red;
}
menu:hover:nth-of-type(n+5) {
  background: green;
}

<nav role="navigation">
  <menu><a href="#">1</a></menu>
  <menu><a href="#">2</a></menu>
  <menu><a href="#">3</a></menu>
  <menu>
    <logo><img src="logo.png"></logo>
    <slogan>slogan here</slogan>
  </menu>
  <menu><a href="#">5</a></menu>
  <menu><a href="#">6</a></menu>
  <menu><a href="#">7</a></menu>
</nav>

Answer 2

由于您的 5-7 个项目是最后一次，您可以使用“nth-last-of-type”选择器与“n”组合，如下所示：

.menu:hover:nth-last-of-type(-n+3)::after { 
  background: green; 
}