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

Question

只有在<div class="widget-area">之前存在<div class="store-content">时才能选择<!--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> 吗？

HTML结构：

.store-content~.widget-area {

}

我在想像

这样的东西

.widget-area

会选择{{1}}，但情况似乎并非如此。

Answer 1

你很亲密，请使用：

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

jsFiddle example

~是一般的兄弟选择器，但.store-content和.widget-area不是兄弟姐妹。你需要.store-content的兄弟，然后你可以选择.widget-area孩子。