如何在存在另一CSS类时阻止指定类选择器生效？

你的核心需求是：当页面中存在.img-1类的元素时，让所有.ani类元素的样式失效；没有.img-1时，.ani正常生效。之前的代码问题在于逻辑指向错误，没有正确区分两个独立元素的关联判断，下面给出两种可行方案：

方案一：JavaScript 实现（兼容性好） #

通过JS检测页面中是否存在.img-1元素，再批量处理.ani元素：

// 检查页面中是否存在.img-1元素
const hasImg1 = document.querySelector('.img-1') !== null;
// 选中所有.ani元素
const aniElements = document.querySelectorAll('.ani');

if (hasImg1) {
  // 存在.img-1时，移除所有.ani元素的ani类
  aniElements.forEach(el => el.classList.remove('ani'));
} else {
  // 不存在时，确保ani类被添加上（可选，根据初始化情况调整）
  aniElements.forEach(el => el.classList.add('ani'));
}

如果需要监听.img-1元素的动态添加/移除（比如异步加载场景），可以用MutationObserver监听DOM变化：

// 监听整个文档的元素添加/移除
const observer = new MutationObserver(mutations => {
  const hasImg1 = document.querySelector('.img-1') !== null;
  const aniElements = document.querySelectorAll('.ani');
  
  aniElements.forEach(el => {
    if (hasImg1) {
      el.classList.remove('ani');
    } else {
      el.classList.add('ani');
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

方案二：纯CSS 实现（现代浏览器支持） #

利用CSS的:has()选择器，直接在样式层面实现关联逻辑（注意：IE不支持，Chrome/Edge 101+、Firefox 121+支持）：

/* 默认状态下.ani生效 */
.ani {
  width: 120px;
  height: 120px;
  background: red;
}

/* 当页面中存在.img-1元素时，覆盖.ani的样式 */
body:has(.img-1) .ani {
  /* 重置样式，比如让背景透明、尺寸继承，按需调整 */
  background: transparent;
  width: auto;
  height: auto;
  /* 也可以直接隐藏：display: none; */
}

.img-1 {
  width: 120px;
  height: 120px;
}

原代码问题说明 #

你之前的JS代码中，element变量没有明确的选择逻辑，既没有选中.ani元素，也没有检查页面中是否存在独立的.img-1元素，导致逻辑无法触发。上述方案修正了这个核心问题，确保两个独立元素的状态关联判断正确。

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