如何在另一个包装器中定位子元素

Question

我目前有一个针对CSS中正确元素的问题。我希望.sizewave能够同时定位自己和.bp_bar。我怎样才能解决第二个问题？

HTML:

<div class="bp_outer_wrapper">
    <img class="sizewave" src="media/images/heart.svg">
    <div class="bp_wrapper">
        <div class="bp_bar"></div>
    </div>
</div>


CSS:

/*This one works*/

.bp_outer_wrapper .sizewave:hover{
  animation: sizewave 1s 7 ease-in-out both;
}

/*This one does not work*/

.bp_outer_wrapper .sizewave:hover .bp_outer_wrapper .bp_wrapper      .bp_bar{
  animation: bloodpreassure 7s 1 ease-in-out;
  animation-fill-mode: forwards;
}

Answer 1

您可以使用兄弟选择器

The general sibling selector ~

.bp_outer_wrapper .sizewave:hover ~ .bp_wrapper .bp_bar{
  animation: bloodpreassure 7s 1 ease-in-out;
  animation-fill-mode: forwards;
}

The adjacent sibling selector +

.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{
  animation: bloodpreassure 7s 1 ease-in-out;
  animation-fill-mode: forwards;
}

Answer 2

使用下一个sibling elemnt + slector，请参阅doc

.bp_outer_wrapper .sizewave:hover + .bp_wrapper  .bp_bar{
  animation: bloodpreassure 7s 1 ease-in-out;
  animation-fill-mode: forwards;
}

Answer 3

这应该做。

.sizewave + .bp_wrapper > .bp_bar {
  //CSS Styles
}