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

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>

在上面的示例中，我尝试使用article类选择每个select-me。 （我不能使用普通的类选择器。）

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