在元素后出现的所有元素的选择器

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; 
}