如何在Tailwind中结合相邻兄弟选择器使用:has伪类？

我有一段可正常运行的CSS代码：

[data-type='transfer']:has(+ [data-type^='sale_']) {
  opacity: 0.25;
}

这段代码通过数据属性选择器，将紧跟在data-type以sale_开头的元素之前的data-type="transfer"元素透明度设置为0.25（为便于观察未隐藏元素）。对应的HTML示例如下：

<ul>
  <li data-type="transfer">a transfer</li>
  <li data-type="sale_buyer">a buyer sale</li>  
  <li data-type="transfer">a transfer</li>
  <li data-type="sale_seller">a seller sale</li>    
</ul>

现在Tailwind已经支持:has伪类，但我尝试的写法无效：

<li className='has-[[data-type=&quot;transfer&quot;] + [data-type^=&quot;sale_&quot;]]:hidden'>...</li>

请问正确的转换方法是什么？

你的写法搞反了:has的作用逻辑——:has()是当前元素关联指定目标时生效，原CSS是选中data-type="transfer"的元素，当它的下一个相邻元素是data-type以sale_开头的元素时应用样式。

正确的Tailwind写法应该给data-type="transfer"的元素添加类：

<li data-type="transfer" className="has-([+ [data-type^='sale_']]:opacity-25)">...</li>

适配JSX环境的引号转义写法：

<li data-type="transfer" className='has-([+ [data-type^="sale_"]]:opacity-25)'>...</li>

逻辑拆解 #

• has-([+ [data-type^='sale_']])：表示当前元素（data-type="transfer"的<li>）的下一个相邻兄弟元素匹配[data-type^='sale_']时，触发后续样式
• :opacity-25：对应原CSS的opacity: 0.25，是Tailwind内置的透明度工具类

完整示例代码 #

<ul>
  <li data-type="transfer" className='has-([+ [data-type^="sale_"]]:opacity-25)'>a transfer</li>
  <li data-type="sale_buyer">a buyer sale</li>  
  <li data-type="transfer" className='has-([+ [data-type^="sale_"]]:opacity-25)'>a transfer</li>
  <li data-type="sale_seller">a seller sale</li>    
</ul>

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