TailwindCSS peer-has-[]仅对前置peer同级元素生效的问题咨询

我希望根据同级元素后代的指定类为目标元素设置样式：当带有peer类的同级元素位于目标元素之前时，peer-has-[.active]/xxx样式能正常生效；但当peer元素位于目标元素之后时，样式完全不生效。

示例代码：

<div>
  <div class="peer/before">
    <div class="active"></div>
  </div>
  <h1 class="peer-has-[.active]/before:italic">This works!</h1>
</div>

<div>
  <h1 class="peer-has-[.active]/after:italic">This does not!</h1>
  <div class="peer/after">
    <div class="active"></div>
  </div>
</div>

这是CSS选择器的固有限制：CSS中不存在向后选择器，无法通过后续元素选择前面的元素。Tailwind的peer-has依赖于CSS的:has()选择器和兄弟选择器（~），而兄弟选择器只能选中当前元素之后的同级元素，反过来的选择逻辑无法实现。

当peer在目标元素前面时，生成的有效CSS规则类似：

.peer\/before:has(.active) ~ .peer-has-\[\.active\]\/before\:italic {
  font-style: italic;
}

但当peer在目标元素后面时，需要的选择器逻辑是“选中前面的目标元素，当后面的peer包含.active时”，而CSS无法支持这种反向选择，因此peer-has无法生成有效的样式规则。

要实现这种“检测后续同级元素状态”的样式效果，可以通过以下两种方式解决：

方案1：调整DOM结构，用CSS视觉还原顺序 #

将peer元素放在目标元素的前面，然后通过Flex布局的flex-direction: column-reverse属性，让视觉上目标元素显示在peer元素之前，这样既满足DOM顺序要求，又能让peer-has正常生效：

<div class="flex flex-col-reverse">
  <div class="peer/reverse">
    <div class="active"></div>
  </div>
  <h1 class="peer-has-[.active]/reverse:italic">This works now!</h1>
</div>

方案2：用JavaScript动态控制样式 #

通过JavaScript监听peer元素后代的.active类状态变化，给目标元素动态添加或移除样式类：

const peerElement = document.querySelector('.peer/after');
const targetHeading = document.querySelector('.target-heading');

// 监听元素变化，检测.active类的存在
const observer = new MutationObserver(() => {
  const hasActive = peerElement.querySelector('.active') !== null;
  targetHeading.classList.toggle('italic', hasActive);
});

// 监听peer元素内部的子元素变化
observer.observe(peerElement, { childList: true, subtree: true });

对应的HTML修改为：

<div>
  <h1 class="target-heading">This works now!</h1>
  <div class="peer/after">
    <div class="active"></div>
  </div>
</div>

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