如何根据子元素的active类为父元素设置样式

首先明确：CSS目前没有原生的父选择器，没法直接通过子元素的状态反向选中父元素，可通过以下两种方案实现需求：

方案一：同步控制父元素类名（推荐） #

既然是通过按钮给子元素添加active类，那可以在操作子元素的同时，给父元素也添加一个对应类（比如has-active-child），之后就能用CSS直接选中父元素设置样式：

/* 父元素拥有has-active-child类时的样式 */
.parent.has-active-child {
  background: red;
}

对应的按钮点击逻辑：

document.querySelector('.btn').addEventListener('click', () => {
  const parent = document.querySelector('.parent');
  const child = document.querySelector('.child');
  // 同时切换子元素的active类和父元素的对应类
  child.classList.toggle('active');
  parent.classList.toggle('has-active-child');
});

这种方法兼容性拉满，逻辑简单，是最常用的解决方案。

方案二：监听子元素类名变化动态设置样式 #

如果无法修改父元素的类名逻辑，可以用MutationObserver监听子元素的class属性变化，动态给父元素设置行内样式：

const child = document.querySelector('.child');
const parent = child.parentElement;

// 创建类名变化观察者
const classObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'class') {
      // 根据子元素是否有active类，切换父元素背景样式
      parent.style.background = child.classList.contains('active') ? 'red' : '';
    }
  });
});

// 开始监听子元素的class属性变化
classObserver.observe(child, { attributes: true });

这种方案不需要额外给父元素加类，但依赖JS执行，适合不能改动原有类名逻辑的场景。

补充：CSS的:has()选择器（比如.parent:has(.child.active)）虽然能直接实现该需求，但目前浏览器兼容性还不够理想（旧版Chrome、Firefox和IE完全不支持），不推荐在生产环境中使用。

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