Tailwind中has-选择器结合子选择器实现指定子元素隐藏问题

方法一：修正父元素的嵌套选择器写法 #

你之前的写法逻辑方向是对的，但可能因Tailwind语法解析细节导致不生效。可以调整为更明确的写法，确保框架正确识别子元素选择器：

<div className='has-[.true]:[&>#menuContainer]:hidden px-1 py-2 text-sm border-t relative md:border-r'>
  <MenuToggle />
  <div
    id='menuContainer'
    className='flex flex-row items-center w-full h-full md:flex-col'
  >
    <!-- 子元素内容 -->
  </div>
</div>

注意：这种嵌套选择器写法需要Tailwind v3.2及以上版本支持，若你的版本较低，建议先升级Tailwind。

方法二：使用peer变体（更直观） #

换一种思路，给父元素添加peer类，再给menuContainer添加peer-has-[.true]:hidden类，逻辑更清晰，也更容易排查问题：

<div className='peer px-1 py-2 text-sm border-t relative md:border-r'>
  <MenuToggle />
  <div
    id='menuContainer'
    className='flex flex-row items-center w-full h-full md:flex-col peer-has-[.true]:hidden'
  >
    <!-- 子元素内容 -->
  </div>
</div>

当父元素（标记为peer）内部包含.true类时，menuContainer就会被隐藏，该写法同样要求Tailwind v3.2+版本。

之前写法失败的可能原因 #

• Tailwind版本低于v3.2，不支持这种嵌套选择器语法，升级版本即可解决。
• 选择器符号或空格位置错误，比如&>#menuContainer中出现多余空格，导致选择器无法匹配目标元素。

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