如何在另一個包裝中定位子元素

我目前有一個針對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

如何在另一個包裝中定位子元素

回答

相關問題