如何用nth-of-type选择第5-7个menu元素实现hover:after效果？

要选中第5至7个<menu>元素的hover状态并设置::after伪元素，你需要使用nth-of-type(n+5)这个CSS选择器，完整代码如下：

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

为什么你的写法不生效？ #

• nth-of-type(5+-n)是错误的语法，CSS的nth-of-type只支持an+b格式的公式（a和b为整数，n从0开始递增）。n+5的含义是：当n取0、1、2时，计算结果为5、6、7，正好对应你需要的第5到7个<menu>元素。
• nth-of-type(5,6,7)或nth-of-type(5-7)这类写法也不被CSS支持，如果你想选中多个特定序号的元素，需要用逗号分隔多个选择器（比如menu:hover:nth-of-type(5)::after, menu:hover:nth-of-type(6)::after, menu:hover:nth-of-type(7)::after），但显然n+5的写法更简洁高效。

补充验证 #

结合你提供的HTML结构，第4个<menu>是包含logo的元素，第5到7个正好是menu 5、menu 6、menu 7，使用n+5可以精准匹配这些元素的hover状态，为它们的::after伪元素设置样式。

内容的提问来源于stack exchange，提问作者Cooperative