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

我目前有一个针对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; 
}

来源

2017-06-22 Lasse L

这应该做。

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

来源

2017-06-22 14:37:21

您可以使用一个同胞选择

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

来源

2017-06-22 13:41:43 Musa

使用一个同级elemnt + slector看到doc

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

来源

2017-06-22 13:55:35

感谢你们两个，我最终做出了爱迪生德苏扎提供的答案。

你们能向我解释那些语法吗？我确实看到了一篇文章，但并没有完全理解。下面，有什么实际上他们的意思：

+ > 〜 <

是否有比四个？

来源

2017-06-22 16:22:34

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

回答

相关问题