如何在TailwindCSS中结合nth-child选择器与hover伪类？

你的问题出在hover样式的作用对象错误：之前的hover:bg-[#6b7280]是给<tr>元素设置背景，但<td>已经通过[&>*:nth-child(even)]/[&>*:nth-child(odd)]设置了自身背景，td的背景会覆盖tr的，导致hover效果无法显现。

下面是两种可行的解决方案：

方案1：直接在tr上控制hover时的子元素样式（简洁首选） #

修改tr的className，把hover样式指向它的所有子td元素，利用优先级覆盖原有奇偶列背景：

<tr 
  key={i} 
  className="[&>*:nth-child(odd)]:bg-[#eee] [&>*:nth-child(even)]:bg-white [&:hover>*]:bg-[#6b7280] group"
  onClick={() => setSelectedRowProtokoll(i === selectedRowProtokoll ? -1 : i)}
>
  {/* 你的td元素列表 */}
</tr>

• [&:hover>*]:bg-[#6b7280]：表示当当前tr被hover时，所有直接子元素（td）应用该背景色，优先级高于奇偶列的基础样式，hover时会自动覆盖。

方案2：用group实现更细粒度的控制 #

如果需要单独hover某个td时变色，或者保留更多自定义空间，可以用group+group-hover组合，注意把group-hover样式放在奇偶样式之后以保证优先级：

{dataProtokoll.map((k, i) => (
  <tr 
    key={i} 
    className="group"
    onClick={() => setSelectedRowProtokoll(i === selectedRowProtokoll ? -1 : i)}
  >
    {Object.values(k).map((value, idx) => (
      <td 
        key={idx}
        className={clsx(
          'text-left border px-2.5 py-2 border-solid border-[rgb(160_160_160)]',
          '[&:nth-child(odd)]:bg-[#eee] [&:nth-child(even)]:bg-white',
          'group-hover:bg-[#6b7280]',
          i === selectedRowProtokoll && 'bg-[#6b7280]'
        )}
      >
        {value}
      </td>
    ))}
  </tr>
))}

• 选中状态的bg-[#6b7280]优先级高于group-hover，因此选中行不会被hover样式覆盖，符合预期。

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