当tooltip子元素含active类时，如何为外部colorme容器设置样式？

你的CSS代码问题分析 #

你写的选择器逻辑方向正确，但存在两处可优化点，同时需要注意浏览器兼容性：

• :has()内部选择器的准确性：原选择器.tooltip:has(tooltip > div.active)未明确.tooltip与内部<tooltip>的直接父子关系，虽能匹配目标元素，但更严谨的写法是限定直接子层级，避免意外匹配深层嵌套的元素。
• 浏览器兼容性限制：:has()是CSS选择器4的新特性，仅支持Chrome 105+、Firefox 121+、Safari 15.4+，若需兼容旧版浏览器，必须用JavaScript方案兜底。

修正后的CSS代码 #

/* 明确直接子关系，仅匹配.tooltip下的直接tooltip子元素，且其直接子div带有active类 */
.tooltip:has(> tooltip > div.active) ~ main-view > div.colorme {
  background: orange;
}

/* 可选：给自定义tooltip标签设置display属性，避免默认inline布局导致的异常 */
tooltip {
  display: block;
}

旧浏览器兼容的JavaScript方案 #

如果需要支持不支持:has()的浏览器，可通过监听元素类变化，手动控制目标元素样式：

// 监听active类的动态变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const hasActive = document.querySelector('.tooltip tooltip div.active') !== null;
    const colorMeEl = document.querySelector('main-view div.colorme');
    
    hasActive ? colorMeEl.classList.add('orange-bg') : colorMeEl.classList.remove('orange-bg');
  });
});

// 绑定监听目标
const tooltipDiv = document.querySelector('.tooltip tooltip div');
observer.observe(tooltipDiv, { attributes: true, attributeFilter: ['class'] });

// 页面加载时初始化一次样式
const hasActiveInit = document.querySelector('.tooltip tooltip div.active') !== null;
const colorMeElInit = document.querySelector('main-view div.colorme');
hasActiveInit ? colorMeElInit.classList.add('orange-bg') : colorMeElInit.classList.remove('orange-bg');

对应的CSS补充：

.orange-bg {
  background: orange;
}

逻辑验证 #

你的HTML结构下，当<tooltip>内部的div带有active类时，修正后的CSS会正确选中.colorme元素并设置橙色背景；JS方案则通过MutationObserver实时监听类的变化，动态更新目标元素样式。

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