元素后显示的所有元素的选择器

Selector for all elements that appear after an element

本文关键字：元素 选择器 显示      更新时间：2023-09-26

我知道+选择器允许我们操作相邻的元素，但我希望操作所有元素而不仅仅是一个元素。

<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来说可能吗？

使用通用的同级组合器：

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

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

你必须使用 ~ 而不是 + ，所有以下元素都将匹配

例如，

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')....

jQuery： LIVE DEMO 

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

http://api.jquery.com/nextUntil/

或使用CSS通用同级组合器（~）：现场演示

#nav-below ~ article{ 
  background:red; 
}
相关文章：