如何在Tailwind中仅隐藏<ul>最后子元素内的特定内容？

解决方案 #

你之前的问题核心是选错了目标元素：把last:hidden加在<span>上时，每个<span>都是所在<li>的最后子元素，自然会全部隐藏。正确的思路是针对**<ul>里的最后一个<li>**内部的<span>做隐藏，而非每个<li>的最后子元素。

下面是两种纯Tailwind的实现方式，不需要依赖数组索引：

方案一：默认显示，仅最后一项隐藏 #

给每个<span>添加自定义选择器类，仅当父元素是最后一个<li>时隐藏：

<ul>
  <li>列表项1 <span class="[li:last-of-type_&]:hidden">; AND</span></li>
  <li>列表项2 <span class="[li:last-of-type_&]:hidden">; AND</span></li>
  <li>列表项3 <span class="[li:last-of-type_&]:hidden">; AND</span></li>
</ul>

• 语法解释：[li:last-of-type_&]是Tailwind支持的自定义选择器，&指代当前的<span>元素，等价于CSS的li:last-of-type span，仅匹配最后一个<li>内部的<span>并添加hidden类。

方案二：默认隐藏，非最后一项显示 #

如果更倾向默认隐藏，只给需要的列表项显示后缀：

<ul>
  <li>列表项1 <span class="hidden [li:not(:last-child)_&]:block">; AND</span></li>
  <li>列表项2 <span class="hidden [li:not(:last-child)_&]:block">; AND</span></li>
  <li>列表项3 <span class="hidden [li:not(:last-child)_&]:block">; AND</span></li>
</ul>

• 语法解释：[li:not(:last-child)_&]等价于CSS的li:not(:last-child) span，匹配所有非最后一个<li>内部的<span>，覆盖默认的hidden类改为block显示。

这两种写法都完全基于Tailwind的原子类语法实现，无需额外逻辑判断，比数组索引的方式更贴合Tailwind的使用习惯。

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