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

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's 。select-me（我不能使用普通的类选择器）。

这对 jQuery 可行吗？

Answer 1

使用通用兄弟组合器：

.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： 现场演示

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

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

或使用 CSS通用兄弟组合器(~)：LIVE DEMO

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