选择CSS中的第n个元素

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

例:我有16个<div>元素…我可以这样写。

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

还有更好的办法吗?

当前回答

顾名思义，:n -child()允许您在常量之外使用n变量构造算术表达式。您可以执行加法(+)、减法(-)和系数乘法(其中a是整数，包括正数、负数和零)。

下面是你如何重写上面的选择器列表:

div:nth-child(4n)

有关这些算术表达式如何工作的解释，请参阅我对这个问题的回答以及规范。

注意，这个答案假设同一个父元素中的所有子元素都是相同的元素类型div。如果你有任何其他不同类型的元素，如h1或p，你将需要使用:n -of-type()而不是:n -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选择器完成此操作。请看我对这个问题的回答。

顺便说一下，4n和4n + 4在:n -child()方面没有太大区别。如果你使用n变量，它从0开始计数。这是每个选择器所匹配的:

: nth-child (4 n)

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

: nth-child (4 n + 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
...

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

2010-08-11 19:58:19

其他回答

顾名思义，:n -child()允许您在常量之外使用n变量构造算术表达式。您可以执行加法(+)、减法(-)和系数乘法(其中a是整数，包括正数、负数和零)。

下面是你如何重写上面的选择器列表:

div:nth-child(4n)

有关这些算术表达式如何工作的解释，请参阅我对这个问题的回答以及规范。

<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>

顺便说一下，4n和4n + 4在:n -child()方面没有太大区别。如果你使用n变量，它从0开始计数。这是每个选择器所匹配的:

: nth-child (4 n)

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

: nth-child (4 n + 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
...

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

2010-08-11 19:58:19

第n个子类需要正确的参数。

参数应该是an + b的形式，以匹配从b开始的每一个子ath。 a和b都是可选整数，都可以为零或负。如果a为零，则没有“每ath子句”。如果a为负，则从b开始反向匹配。如果b为零或负，则可以使用正b写出等效表达式，例如4n+0与4n+4相同。同理，4n-1等于4n+3。

例子:

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

李:nth-child (4n) { 背景:黄色; 的 < ol > < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < / ol >

从1(1,5,9，…)

李:nth-child (4n + 1) { 背景:黄色; 的 < ol > < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < / ol >

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

两名女演员正在请求李:nth-child (4n + 3), 李:nth-child (4n + 4) { 背景:黄色; 的 < ol > < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < / ol >

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

当一个负的匹配是反向的李:nth-child (-n + 4) { 背景:黄色; 的 < ol > < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < li > < / li >项目 < / ol >

2015-08-08 18:40:51

div:nth-child(4n+4)

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

2010-08-11 19:59:36

试试这个

div:nth-child(4n+4)

2010-08-11 19:59:40

选择CSS中的第n个元素

推荐文章

最新文章

标签