CSS多选择器逻辑AND实现方案求助（Bootstrap折叠面板场景）

首先得明确：CSS原生确实没有直接的跨元素逻辑AND选择器，也没有官方的父选择器，但现在有了:has()这个强大的选择器（已被Chrome、Firefox 121+、Safari等主流浏览器支持），刚好能解决你的问题，而且不用改动现有HTML结构。

方法一：使用CSS :has() 选择器（推荐，现代浏览器） #

:has()选择器允许我们基于后代元素的状态来选择父元素，完美实现你需要的"当#data拥有.show类时，设置#content::after样式"的逻辑。具体写法如下：

/* 当#holder的直接子元素#data拥有.show类时，选中#content的::after伪元素 */
#holder:has(> #data.show) > #toggle > #content::after {
  /* 这里写你需要的样式，比如： */
  content: "展开状态";
  color: green;
  margin-left: 8px;
}

/* 当#data是hide状态时的样式（可选） */
#holder:has(> #data.hide) > #toggle > #content::after {
  content: "收起状态";
  color: gray;
  margin-left: 8px;
}

这个写法的逻辑拆解：

• #holder:has(> #data.show) 表示拥有直接子元素#data且该元素带有.show类的#holder元素
• 再通过子元素选择器定位到#toggle下的#content::after，实现跨元素的状态关联

方法二：兼容旧浏览器的轻量JS方案 #

如果需要兼容不支持:has()的旧浏览器（比如Firefox 120及以下），可以通过监听Bootstrap折叠组件的原生事件，给#content同步状态类，再用普通CSS控制样式：

JS代码（适配Bootstrap折叠逻辑） #

// 获取目标元素
const dataElement = document.getElementById('data');
const contentElement = document.getElementById('content');

// 监听折叠展开/收起事件
dataElement.addEventListener('shown.bs.collapse', () => {
  contentElement.classList.add('data-shown');
});

dataElement.addEventListener('hidden.bs.collapse', () => {
  contentElement.classList.remove('data-shown');
});

对应CSS样式 #

/* 展开状态下的伪元素样式 */
#content.data-shown::after {
  content: "展开状态";
  color: green;
  margin-left: 8px;
}

/* 默认收起状态的伪元素样式 */
#content::after {
  content: "收起状态";
  color: gray;
  margin-left: 8px;
}

这个方案完全不改动现有HTML结构，只是通过Bootstrap的折叠事件同步状态类，逻辑清晰且兼容性拉满。

为什么你的原始写法无效？ #

你尝试的#holder > #data.show && #holder > #toggle > #content::after是无效语法，因为CSS中没有&&这种逻辑运算符。CSS的选择器逻辑都是通过组合选择器（后代、子元素、相邻兄弟等）来实现的，而:has()是实现跨元素状态关联的关键新特性。

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