如何使用Tailwind CSS通过父元素设置特定嵌套标签样式？

你之前用的[&>li>a]是直接子级选择器，只能选中<li>直接下属的<a>（比如代码里的Route2），但Route3的<a>包在<li>里的<div>里面，属于后代元素而非直接子级，所以这个选择器覆盖不到它。

要让<ul>下所有<li>内部的<a>都能被选中，把选择器改成后代选择器就行，去掉>符号：

<ul class="flex items-center [& li a]:hover:text-white">
  <li class="flex items-center">
    <div>
      <a href="/"> Route3 </a>
    </div>
    <a href="/"> Route2 </a>
    <span class="hero-chevron-right separator-icon"></span>
  </li>
</ul>

这样不管<a>在<li>里嵌套多少层，只要是<li>的后代，hover时都会变成白色，完全符合你的需求——不用改配置，也不用加额外选择器。

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