4

我的 HTML 中有一些 div，动态数量的 div

如何仅选择 div 2,5,8,11 ？

我试过了，:nth-child(2n+3)但不完全是我需要的

这是代码：

<!DOCTYPE html>
<html>
  <head>
      <style>
          .a:nth-child(2n+3) { background:#ff0000; }
      </style>
  </head>
  <body>
    <p class="a">The first paragraph.</p>
    <p class="a">The second paragraph.</p>
    <p class="a">The third paragraph.</p>
    <p class="a">The fourth paragraph.</p>
    <p class="a">The fifth paragraph.</p>
    <p class="a">The sixth paragraph.</p>
    <p class="a">The seventh paragraph.</p>
    <p class="a">The eight paragraph.</p>
    <p class="a">The ninth paragraph.</p>
    <p class="a">The seventh paragraph.</p>
    <p class="a">The eight paragraph.</p>
    <p class="a">The ninth paragraph.</p>
  </body>
</html>
4

3 回答 3

15

编辑如果只需要 2、5、8、11，那么答案是：

p:nth-child(3n+2)
{
   background: #ccc;
}

要选择第 2、3、5、8、11 段：

p:nth-child(3n+2),p:nth-child(3)
{
   background: #ccc;
}

小提琴

我不得不单独添加 p:nth-child(3) 因为它不适合每次 +3 的一般模式。

于 2013-08-13T08:13:26.727 回答
1

E:nth-child(n) 一个 E 元素，其父元素的第 n 个子元素

例如 ：

 div:nth-child(2),div:nth-child(5){color:red;}
于 2013-08-13T08:09:50.503 回答
0

如果 div 是动态插入的，你能不能给每个 div 一个 id，比如“nested1，nested2”等？如果您使用这种方法，请记住不要以整数开头您的 id，因为 CSS 不会选择它。

于 2013-08-13T08:12:19.787 回答