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同级选择器~ / +都可以用作标记中下一个兄弟的目标。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;