从另一个非父div使用CSS Class选择一个div

Question

有没有办法<div class="widget-area">只选择<div class="store-content">之前是否存在？

HTML结构:

<!--Store Content Div-->
<div id="content" role="main" class="store-content twentythirteen">...</div>

<div id="tertiary" class="sidebar-container" role="complementary">
    <div class="sidebar-inner">
        <!--Widget Area Div-->
        <div class="widget-area">
        </div>
    </div>
</div>

我在想类似的东西

.store-content~.widget-area {

}

会选择,.widget-area但似乎并非如此.

Answer 1

你很亲密,使用:

.store-content ~ div .widget-area {
    color:red;
}

jsFiddle例子

~是一般兄弟选择,但.store-content并.widget-area没有兄弟姐妹.你需要兄弟姐妹,.store-content然后你可以选择一个.widget-area孩子.