无:has选择器时，依据非相邻后续兄弟类选择指定子元素

两种HTML结构 #

结构一（需要选中其中的.background） #

<div class="content">
  <div class="background">
    ...
  </div>
</div>
<div class="indicators"></div>
<div class="overlay">...</div>
<div class="border speaking">

结构二（不需要选中其中的.background） #

<div class="content">
  <div class="background">
    ...
  </div>
</div>
<div class="indicators"></div>
<div class="overlay">...</div>
<div class="border">

问题分析 #

需求是选中结构一中的.background元素，但排除结构二中的，两者唯一区别是最后一个.border是否带有speaking类。由于无法使用:has()选择器（Firefox环境限制），而纯CSS不支持反向选择（即根据后续元素的状态选择前面的元素），因此需要借助JavaScript实现。

为什么你的CSS选择器不生效 #

你尝试的.content:not( ~ .border:not(.speaking) ) > .background逻辑存在本质问题：CSS选择器是单向匹配（从左到右），无法基于后续兄弟元素的状态精准筛选前面的.content。即使逻辑上看似成立，也会因为中间存在.indicators、.overlay等兄弟元素导致匹配不可靠，且浏览器对这类复杂否定选择器的支持存在差异。

解决方案：使用JavaScript定位目标元素 #

通过JavaScript找到带speaking类的.border，再反向查找对应的.background元素：

// 找到所有带speaking类的.border元素
document.querySelectorAll('.border.speaking').forEach(borderEl => {
  // 遍历当前.border的前置兄弟元素，找到对应的.content
  let prevElement = borderEl.previousElementSibling;
  while (prevElement) {
    if (prevElement.classList.contains('content')) {
      // 获取.content下的.background元素
      const targetBackground = prevElement.querySelector('.background');
      if (targetBackground) {
        // 为目标元素添加自定义类，方便后续用CSS设置样式
        targetBackground.classList.add('selected-background');
      }
      break;
    }
    prevElement = prevElement.previousElementSibling;
  }
});

然后在CSS中定义目标样式：

.selected-background {
  /* 这里写入你的样式规则 */
  background-color: #f0f0f0;
  /* 示例样式 */
}

如果所有元素都有共同的父容器，还可以简化查找逻辑：

document.querySelectorAll('.border.speaking').forEach(borderEl => {
  const parentContainer = borderEl.parentElement;
  const contentEl = parentContainer.querySelector('.content');
  if (contentEl) {
    const targetBackground = contentEl.querySelector('.background');
    targetBackground?.classList.add('selected-background');
  }
});

这种方法能精准定位到结构一中的.background元素，完全满足需求。

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