如何仅通过样式，在子按钮含collapsed类时修改panel-heading背景？

问题说明 #

需要仅通过样式实现：当子元素<button>拥有collapsed类时，修改其父元素.panel-heading的背景颜色。尝试使用:has()选择器的LESS代码未生效。

原因分析 #

你使用的:has()选择器是CSS4新特性，主流现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已支持，但可能存在以下失效场景：

• 运行环境的浏览器版本过低，不支持:has()
• LESS预处理器版本较旧，对:has()选择器的编译处理有问题
• 现有样式优先级高于你的规则，!important未正确覆盖原有样式

可行方案 #

方案1：修复:has()选择器的使用

先确认浏览器版本符合:has()支持要求，再调整代码写法，通过提升选择器优先级避免依赖!important：

/* 原生CSS写法（或确保LESS能正确编译该选择器） */
.panel .panel-heading:has(button.collapsed) {
  background-color: #fff;
}

如果必须使用LESS，确保你的LESS版本支持:has()选择器编译，或者直接将这段原生CSS引入项目。

方案2：兼容旧浏览器的替代思路

纯CSS规则是单向的（仅能从父级向下影响子级），若要兼容不支持:has()的旧浏览器，要么调整DOM结构（把状态类转移到父元素上），要么添加少量JS同步状态：

// 仅作参考，允许使用JS的情况下
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function() {
    this.parentElement.classList.toggle('has-collapsed', this.classList.contains('collapsed'));
  });
});

然后针对父元素的新类写样式：

.panel-heading.has-collapsed {
  background-color: #fff;
}

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