在元素後出現的所有元素的選擇器

Question

我知道+選擇器允許我們操縱相鄰元素，但我正在尋找操縱所有元素而不是僅僅一個元素。

<article class="non-selected"></article> 
<nav id="nav-below"></nav> 
<article class="select-me"></article> 
<article class="select-me"></article> 
<article class="select-me"></article> 
<footer class="dont-select-me"></footer> 

在上面的例子中，我試圖與select-me類選擇每個article的的。 （我不能使用普通的類選擇器）。

這是可能的jQuery？

Answer 1

使用general sibling combinator：

.non-selected ~ .select-me { 
    color: red; 
} 

示例：http://jsfiddle.net/XFGfd/5/

Answer 2

你必須使用~而不是+，以下所有元素將被匹配

對於爲例，

article.non-selected ~ article.select-me{} /* will select all articles having .select-me class that are siblings but after a article having the .non-selected element class */ 

使用jQuery

$('article.non-selected ~ article.select-me').... 

Answer 3

的jQuery：LIVE DEMO

$('#nav-below').nextUntil('.dont-select-me') // do something 

_{http://api.jquery.com/nextUntil/}

或者使用CSS General sibling combinator（〜）：LIVE DEMO

#nav-below ~ article{ 
    background:red; 
}