selectCSS中的每个第N个元素
是否可以select一组元素中的每个第四个元素？
例如：我有16个<div>元素…我可以写一些类似的东西。
div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16)
有没有更好的方法来做到这一点？
顾名思义， : n th-child()允许您使用nvariables和常量数字构造一个算术expression式。 您可以执行加法（ + ），减法（ - ）和系数乘法 （其中a是一个整数，包括正数，负数和零）。
以下是如何重写上面的select器列表：
div:nth-child(4n)
有关这些算术expression式如何工作的解释，请参阅我对这个问题的回答 ，以及规范 。
请注意，这个答案假定同一父元素中的所有子元素都是相同的元素typesdiv 。 如果你有其他types的元素，例如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>
对于其他任何东西（类，属性或这些的任意组合），在你寻找与任意一个select器相匹配的第n个子元素的地方，你将不能用纯CSSselect器来做到这一点。 看到我对这个问题的回答 。
顺便说一句，在4n和4n + 4之间没有什么区别，就是:nth-child() 。 如果使用nvariables，它将从0开始计数。这是每个select器将匹配的内容：
: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 ...
正如你所看到的，这两个select器将匹配与上面相同的元素。 在这种情况下，没有区别。
div:nth-child(4n+4)
参见： http : //css-tricks.com/how-nth-child-works/
尝试这个
div:nth-child(4n+4)
你需要正确的参数为nth-child伪类。
-
参数应该是以
an + b的forms来匹配从b开始的每一个孩子。 -
a和b都是可选的整数，都可以是零或负数。- 如果
a是零，那么不存在“每一个孩子”条款。 - 如果
a是负值，则匹配从b开始向后完成。 - 如果
b是零或负数，那么有可能使用正数b写等价expression式，例如4n+0与4n+4相同。 同样，4n-1与4n+3相同。
- 如果
例子：
每4个孩子选一个（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>
