如何定位另一个包装器中的子元素
How to target child elements within another wrapper
我目前遇到了针对 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;
}
您可以使用一个兄弟选择器
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;
}
使用下一个兄弟元素+选择器参见doc
.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{
animation: bloodpreassure 7s 1 ease-in-out;
animation-fill-mode: forwards;
}
这应该可以。
.sizewave + .bp_wrapper > .bp_bar {
//CSS Styles
}
我目前遇到了针对 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;
}
您可以使用一个兄弟选择器
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;
}
使用下一个兄弟元素+选择器参见doc
.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{
animation: bloodpreassure 7s 1 ease-in-out;
animation-fill-mode: forwards;
}
这应该可以。
.sizewave + .bp_wrapper > .bp_bar {
//CSS Styles
}