代码之家 › 专栏 › 技术社区 › Derek Adair

选择CSS中的每个第n个元素

css-selectors css3 css

221

Derek Adair · 技术社区 · 14 年前

是否可以选择一组元素中的每四个元素?

我有16个 <div> 元素。。。我可以写一些类似的东西。

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

有更好的方法吗?

4 回复 | 直到 9 年前

1

393

Community CDub 7 年前

顾名思义, : n th-child() 允许您使用 n 除常数外的变量。您可以执行添加( + ),减法( - ) coefficient multiplication ( an 在哪里? a 是一个整数,包括正数、负数和零)。

以下是重写上述选择器列表的方法:

div:nth-child(4n)

有关这些算术表达式如何工作的解释,请参阅我的答案 this question 以及 spec .

请注意,此答案假定同一父元素中的所有子元素都是相同的元素类型, div . 如果您有任何其他不同类型的元素,例如 h1 或 p ,您需要使用 :nth-of-type() 而不是 :nth-child() 确保你只数 div 元素:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

对于其他所有内容(类、属性或它们的任何组合),如果要查找与任意选择器匹配的第n个子项,则不能使用纯CSS选择器执行此操作。看看我的答案 this question .

顺便说一下,4N和4N+4在 nth-() . 如果您使用 n 变量,从0开始计数。这是每个选择器将匹配的内容:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

如您所见,两个选择器将与上面相同的元素匹配。在这种情况下,没有区别。

2

24

Tomalak 13 年前

div:nth-child(4n+4)

见: http://css-tricks.com/how-nth-child-works/

3

12

BoltClock 13 年前

试试这个

div:nth-child(4n+4)

4

8

Salman Arshad 9 年前

你需要正确的理由 nth-child 伪类。

参数的形式应为 an + b 匹配每一个 ^钍孩子从B开始。
两个 a 和 b 是可选整数,两者都可以是零或负。
- 如果 一 是零就没有了 “每一个 ^钍 “孩子” 条款。
- 如果 一 为负,则从开始向后匹配 乙 .
- 如果 乙 为零或负数,则可以使用正数编写等效表达式 乙 例如 4n+0 一样 4n+4 . 同样地 4n-1 一样 4n+3 .

实例:

选择每四个孩子(4,8,12,…)

li:nth-child(4n) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

从1(1,5,9,…)开始,选择每四个孩子

li:nth-child(4n+1) {
  background: yellow;
}

<OL & GT;
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
& lt;/OL & gt;

从4个组(3和4,7和8,11和12,…)中选择每3和4个孩子。

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  background: yellow;
}

<OL & GT;
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
& lt;/OL & gt;

选择前4项(4、3、2、1)

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  background: yellow;
}

<OL & GT;
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
& lt;/OL & gt;