顾名思义，它允许您使用除常数以外的变量构造算术表达式。您可以执行加法（），减法（）和系数乘法（其中是整数，包括正数，负数和零）。
:**n** th-child()``n``+``-``an``a
这是重写上面的选择器列表的方法：
div:nth-child(4n)
有关这些算术表达式如何工作的解释，请参见我对该问题的回答以及规范。
请注意，此答案假设同一父元素内的所有子元素都具有相同的元素类型
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选择器来完成此操作。
顺便说一下，关于，4n和4n + 4之间没有太大区别
:nth-child()。如果使用该
n变量，它将从0开始计数。这是每个选择器都将匹配的内容：
:nth-child(4n)
4(0) = 04(1) = 44(2) = 84(3) = 124(4) = 16...
:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 44(1) + 4 = 4 + 4 = 84(2) + 4 = 8 + 4 = 124(3) + 4 = 12 + 4 = 164(4) + 4 = 16 + 4 = 20...
如您所见，两个选择器将与上述相同的元素匹配，没有区别。
