如何用TailwindCSS实现仅悬停单个a标签时修改文本颜色

问题根源 #

你第一个示例代码里的[&_a]:hover:text-red-500写法逻辑错误——它的作用是当<ul>被悬停时，所有子<a>元素变色，而非<a>自身悬停时触发颜色变化。

方案1：修正嵌套选择器指向自身的hover状态 #

通过调整选择器层级，直接指定<ul>下的<a>元素处于hover状态时的样式，只有鼠标悬停在<a>本身上才会变色：

<script src="https://cdn.tailwindcss.com"></script>

<ul class="flex gap-3 [&_a]:block [&_a]:text-blue-500 [&_a:hover]:text-red-500">
  <li><a href="https://www.example.com/">foo</a></li>
  <li><a href="https://www.example.com/">bar</a></li>
  <li><a href="https://www.example.com/">baz</a></li>
</ul>

这里将[&_a]:hover:text-red-500改为[&_a:hover]:text-red-500，核心区别：

• 原写法：<ul>被hover → 所有子<a>变色
• 新写法：<ul>下的<a>自身被hover → 该<a>变色

方案2：自定义Tailwind工具类 #

通过@layer定义可复用的工具类，将<a>的基础样式和hover样式封装进去，只需给<ul>添加该类即可生效：

<script src="https://cdn.tailwindcss.com"></script>

<style type="text/tailwindcss">
@layer utilities {
  .nav-links {
    & a {
      display: block;
      color: theme('colors.blue.500');
      &:hover {
        color: theme('colors.red.500');
      }
    }
  }
}
</style>

<ul class="flex gap-3 nav-links">
  <li><a href="https://www.example.com/">foo</a></li>
  <li><a href="https://www.example.com/">bar</a></li>
  <li><a href="https://www.example.com/">baz</a></li>
</ul>

这种方式既不用在<ul>的class里写复杂嵌套语法，也不用给每个<a>单独加hover类，样式逻辑封装后还能复用。

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