html - CSS 兄弟选择器未按预期工作

Question

我正在尝试使用 CSS 兄弟选择器，但它们似乎没有按规则工作。

基本上，我正在使用 Bootstrap 中的 panel 并尝试通过规则更改 panel-heading css。

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

Link to JS Fiddle

我也尝试过使用下面的 CSS:

.collpase + .heading{
   opacity: 0.2
 }

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

有什么想法吗？

Answer 1

由于无法选择前一个兄弟，因此可以使用 flexbox 通过标记中的一个顺序和另一个视觉呈现来实现该效果。

这里我使用了 flex，切换了标记中的顺序，并再次在视觉上使用 flexbox 属性 order

现在，CSS 同级选择器 ~/+ 都可以工作，因为它们以标记中的下一个同级为目标。

.heading {
  color: #fff;
  background: #000;
  padding: 5px;
  margin: 5px;
}
.collapse {
  padding: 5px;
  display: none;
  order: 2                      /*  added property  */
}
.collapse.in {
  display: block;
}
.flex {                         /*  added rule */
  display: flex;
  flex-direction: column;
}
.collapse ~ .heading {          /*  "collapse" was misspelled  */
  opacity: 0.2;
}
.collapse.in ~ .heading {       /*  "collapse" was misspelled  */
  opacity: 1;
}

<div class="parent">
  <div class="firstChild flex">
    <div class="collapse in">
      Content
    </div>
    <div class="heading">
      STep 1
    </div>
  </div>
  <div class="secondChild flex">
    <div class="collapse">
      Content
    </div>
    <div class="heading">
      STep 2
    </div>
  </div>
  <div class="thirdChild flex">
    <div class="collapse">
      Content
    </div>
    <div class="heading">
      STep 3
    </div>
  </div>
  <div class="fourthChild flex">
    <div class="collapse">
      Content
    </div>
    <div class="heading">
      STep 4
    </div>
  </div>
</div>

对于旧版浏览器，可以使用display:table

.heading {
  color: #fff;
  background: #000;
  padding: 5px;
  margin: 5px;
}
.collapse {
  padding: 5px;
  display: none;
}
.collapse.in {
  display: table-footer-group;  /*  changed property */
}
.child {                        /*  added rule */
  display: table;
}
.collapse ~ .heading {          /*  "collapse" was misspelled  */
  opacity: 0.2;
}
.collapse.in ~ .heading {       /*  "collapse" was misspelled  */
  opacity: 1;
}

<div class="parent">
  <div class="first child">
    <div class="collapse in">
      Content
    </div>
    <div class="heading">
      STep 1
    </div>
  </div>
  <div class="second child">
    <div class="collapse">
      Content
    </div>
    <div class="heading">
      STep 2
    </div>
  </div>
  <div class="third child">
    <div class="collapse">
      Content
    </div>
    <div class="heading">
      STep 3
    </div>
  </div>
  <div class="fourth child">
    <div class="collapse">
      Content
    </div>
    <div class="heading">
      STep 4
    </div>
  </div>
</div>