如何使用Tailwind CSS为子元素单独设置hover类

你现在的写法会导致父容器被hover时所有子链接都变粗，要让单个子元素hover时自己变粗，只需要调整内联类的写法：

错误写法的问题 #

当前代码：

<div class="[&>a]:hover:font-bold">
  <a>link 1</a>
  <a>link 2</a>
</div>

这个类的逻辑是：当父div处于hover状态时，它的所有直接子元素<a>都应用font-bold样式。所以不管你hover哪个链接，父容器都会触发hover状态，导致所有子链接一起变粗。

正确写法 #

把hover的作用对象改成子元素自身，给父元素用这个类：[&>a:hover]:font-bold，这样只有被hover的那个<a>才会变粗：

<div class="[&>a:hover]:font-bold">
  <a>link 1</a>
  <a>link 2</a>
</div>

如果子元素数量不多，也可以直接给每个<a>单独加hover:font-bold类，效果一致：

<div>
  <a class="hover:font-bold">link 1</a>
  <a class="hover:font-bold">link 2</a>
</div>

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