当页面其他位置存在指定类时，如何隐藏无亲属关系的CSS元素？

一、纯CSS实现（推荐，现代浏览器兼容） #

直接使用CSS原生:has()伪类即可实现，无需编写JS代码：

/* 只要页面内存在 .is-open 类的元素，就隐藏 .sticky-button */
:root:has(.is-open) .sticky-button {
  display: none;
}

兼容性说明：Chrome 105+、Firefox 121+、Safari 15.4+及以上版本浏览器均支持该写法，若需兼容更低版本浏览器请使用JS方案。

二、JS方案（全兼容） #

原有代码失效原因 #

1. 语法错误：缺少if语句的闭合右大括号}
2. 逻辑缺陷：仅在代码运行的瞬间检测一次.is-open是否存在，如果.is-open是用户交互后动态添加/移除的，不会自动同步状态更新

1. 基础修复版（仅页面加载时检测一次） #

var openEl = document.querySelector('.is-open');
var stickyBtn = document.querySelector('.sticky-button');

if (openEl && stickyBtn) {
  stickyBtn.style.display = 'none';
}

2. 动态监听版（支持动态增删.is-open类的场景） #

如果.is-open是后续交互中动态切换的，使用MutationObserver监听全局类变化即可自动同步状态：

const stickyBtn = document.querySelector('.sticky-button');

// 监听整个文档的class属性变化
const observer = new MutationObserver(() => {
  const hasOpenClass = !!document.querySelector('.is-open');
  if (stickyBtn) {
    stickyBtn.style.display = hasOpenClass ? 'none' : 'block';
  }
});

observer.observe(document.body, {
  subtree: true,
  attributes: true,
  attributeFilter: ['class']
});

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