在处理一组元素时，通常需要定期选择特定元素。例如，您可能想要选择每第四个、第六个或第十个元素。传统上，这是通过显式指定每个第 n 个元素来实现的，例如：
div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16)
但是，有一种更有效的方法可以使用 :nth-child() 选择器来实现此目的。
:nth-child() 选择器允许您使用以下方式构造算术表达式n 变量。这意味着您可以执行加法、减法和系数乘法。
要选择每四个元素，您将使用以下选择器：
div:nth-child(4n)
此表达式意味着它将匹配每个元素即 0n、4n、8n 等等。
需要注意的是，这个表达式假设所有子元素都具有相同的类型。如果您有不同类型的元素，例如 h1 或 p，则应使用 :nth-of-type() 代替：
<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>
div:nth-of-type(4n)
在CSS中，n变量从0开始计数。因此，如果使用表达式4n，它将选择索引为0、4、8等的元素 在。如果您想从 1 开始计数，可以使用表达式 4n 1 代替。
以上是如何使用 :nth-child() 高效地选择 CSS 中的每第 N 个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！
