Html CSS同级选择器未按预期工作

我试图使用CSS同级选择器，但似乎它们没有按照规则工作

基本上，我正在使用bootstrap中的

面板

，并试图通过规则更改

面板标题

css

我创建了一个类似的标记来复制这个问题，下面是JS FIDLE链接

我还尝试了以下css：

.collpase + .heading{
   opacity: 0.2
 }

.collpase.in + .heading{
  opacity: 1
}

---

有什么想法吗？

因为不能选择以前的兄弟姐妹，所以可以使用

flexbox

通过一个标记顺序和另一个视觉渲染来实现这种效果

在这里，我使用了

flex

，在标记中切换顺序，并再次使用

flexbox

property

order

现在，两个CSS同级选择器

~

/

+

将以标记中的下一个同级为目标工作

。标题{
颜色：#fff；
背景：#000；
填充物：5px；
保证金：5px；
}
.崩溃{
填充物：5px；
显示：无；
订单：2/*新增属性*/
}
.崩溃{
显示：块；
}
.flex{/*添加了规则*/
显示器：flex；
弯曲方向：立柱；
}
.collapse~。标题{/*“collapse”拼写错误*/
不透明度：0.2；
}
.collapse.in~。标题{/*“collapse”拼写错误*/
不透明度：1；
}

内容
第一步
内容
步骤2
内容
步骤3
内容
步骤4

由于不能选择以前的兄弟姐妹，因此可以使用

flexbox

通过一个标记顺序和另一个视觉渲染来实现该效果

在这里，我使用了

flex

，在标记中切换顺序，并再次使用

flexbox

property

order

现在，两个CSS同级选择器

~

/

+

将以标记中的下一个同级为目标工作

。标题{
颜色：#fff；
背景：#000；
填充物：5px；
保证金：5px；
}
.崩溃{
填充物：5px；
显示：无；
订单：2/*新增属性*/
}
.崩溃{
显示：块；
}
.flex{/*添加了规则*/
显示器：flex；
弯曲方向：立柱；
}
.collapse~。标题{/*“collapse”拼写错误*/
不透明度：0.2；
}
.collapse.in~。标题{/*“collapse”拼写错误*/
不透明度：1；
}

内容
第一步
内容
步骤2
内容
步骤3
内容
步骤4

flex在所有浏览器中都受支持吗？@Gags它在所有现代浏览器中都有效，并且全球支持率约为95%：。。。你需要支持哪些浏览器？对我来说，它仍然不起作用，。。我的标记如

https://jsfiddle.net/cansjj59/1/

@Gags标记未交换，类名

折叠

拼写错误，目标类是

面板标题

，而不是

标题

。。。本小提琴作品：采用上述解决方案。。引导的

不起作用。所有浏览器都不再支持reponsiveis flex了？@Gags它在所有现代浏览器中都能正常工作，全球支持率约为95%：。。。你需要支持哪些浏览器？对我来说，它仍然不起作用，。。我的标记如

https://jsfiddle.net/cansjj59/1/

@Gags标记未交换，类名

折叠

拼写错误，目标类是

面板标题

，而不是

标题

。。。本小提琴作品：采用上述解决方案。。引导的

不起作用。桌子不再有反应了