Question

我知道CSS“子”方法，但这些方法仅适用于单个div或具有相同设置的div而不适用于组。

我想从div＃7运行一个脚本直到最后一个。问题是所有div都具有相同的结构（这是一个要求）。

示例：

info.Plist

有没有办法说出类似<div class"my_div">Some Text</div> <div class"my_div">Some Text</div> <div class"my_div">Some Text</div> <div class"my_div">Some Text</div> <div class"my_div">Some Text</div> <div class"my_div">Some Text</div> <div class"my_div">Some Text</div>  <div class"my_div">Some Text</div> <div class"my_div">Some Text</div>  <div class"my_div">Some Text</div>的内容？

Answer 1

您可以使用jQuery＆＃39; slice方法：

$('.my_div').slice(6)

纯CSS方法是nth-child选择器：

.my_div:nth-child(n+6)

似乎现代浏览器支持：http://caniuse.com/#feat=css-sel3

Answer 2

尝试使用以下:gt()选择器：

.my_div:gt(6)

Answer 3

.my_div:nth-last-child(6) ~ .my_div {
  attribute: value
}

此选择器将匹配第六个之后的任何.my_div项。您可以将数字更改为您喜欢的任何内容。

现在你唯一不能做的就是告诉选择器何时停止。这需要第二个：

.my_div:nth-last-child(x) {
  attribute: value
}

此处X必须与您想要停止计数时的数字匹配。

为了让事情变得简单，你也可以使用它：

.my_div:nth-child(n+6) {
  attribute: value
}

也将计算6号到无穷大之后的所有元素。

这是指向详细解释该方法的文章的链接：http://alistapart.com/article/quantity-queries-for-css （尤其是本节：http://alistapart.com/article/quantity-queries-for-css#section6）

Answer 4

Yo可以使用下面的代码进行范围选择，例如索引大于6且小于10的元素

$(document).ready(function(){
     
  $(".my_div:lt(10)").filter(":gt(6)").addClass("blue");
  
});

.blue{
  color: blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div> 
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div> 
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div> 
<div class="my_div">Some Text</div>
<div class="my_div">Some Text</div>

如何使用CSS或jQuery跳过前N个元素？

4 个答案: