TailwindCSS v4：hover:nth-*类无法正确作用于子<li>元素的问题咨询

我想给每个<li>元素设置不同的鼠标悬停背景色，使用了如下TailwindCSS类写法：

hover:nth-1:bg-black hover:nth-2:bg-blue-800

但实际只有第一个<li>元素在鼠标悬停时样式生效。请问这是TailwindCSS v4的Bug，还是我的写法存在错误？我的代码实现如下：

export default function Page() {
    return (
        <ul className='w-60 h-80 hover:nth-1:bg-black hover:nth-2:bg-blue-800'>
            <li className='w-60 h-80'>aaaaaa</li>
            <li className='w-60 h-80'>bbbbbb</li>
            <li className='w-60 h-80'>ccccc</li>
        </ul>
    )
}

原因与正确写法 #

这不是TailwindCSS v4的Bug，是你的写法存在两个关键错误：

1. 选择器顺序错误：TailwindCSS要求状态类（如hover）必须放在目标元素的选择器（如:nth-child）之后，而不是前面。
2. 伪类语法错误：nth-1不是合法的Tailwind伪类写法，正确的子元素索引选择器是nth-child(1)。

正确写法一：在父元素<ul>上统一配置 #

将类名调整为正确的顺序和语法，直接给指定索引的<li>设置hover样式：

export default function Page() {
    return (
        <ul className='w-60 h-80 nth-child(1):hover:bg-black nth-child(2):hover:bg-blue-800 nth-child(3):hover:bg-green-800'>
            <li className='w-60 h-80'>aaaaaa</li>
            <li className='w-60 h-80'>bbbbbb</li>
            <li className='w-60 h-80'>ccccc</li>
        </ul>
    )
}

正确写法二：直接给每个<li>单独配置（更直观） #

如果列表项数量不多，直接给每个<li>添加对应的hover类，可读性更强：

export default function Page() {
    return (
        <ul className='w-60 h-80'>
            <li className='w-60 h-80 hover:bg-black'>aaaaaa</li>
            <li className='w-60 h-80 hover:bg-blue-800'>bbbbbb</li>
            <li className='w-60 h-80 hover:bg-green-800'>ccccc</li>
        </ul>
    )
}

原写法仅第一个生效的原因 #

原写法中的hover:nth-1会被Tailwind错误解析为给<ul>本身添加hover状态下的无效样式，第一个<li>的样式生效属于巧合（可能是解析时的意外匹配），其余<li>因为语法错误无法被正确识别。

内容的提问来源于stack exchange，提问作者卢佳楠