如何使用 :nth-child() 高效地选择 CSS 中的每第 N 个元素？

选择 CSS 中的每 N 个元素

在处理一组元素时，通常需要定期选择特定元素。例如，您可能想要选择每第四个、第六个或第十个元素。传统上，这是通过显式指定每个第 n 个元素来实现的，例如：

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

但是，有一种更有效的方法可以使用 :nth-child() 选择器来实现此目的。

使用“:nth-child()”选择器

:nth-child() 选择器允许您使用以下方式构造算术表达式n 变量。这意味着您可以执行加法、减法和系数乘法。

要选择每四个元素，您将使用以下选择器：

div:nth-child(4n)

此表达式意味着它将匹配每个元素即 0n、4n、8n 等等。

处理不同元素类型

需要注意的是，这个表达式假设所有子元素都具有相同的类型。如果您有不同类型的元素，例如 h1 或 p，则应使用 :nth-of-type() 代替：

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

div:nth-of-type(4n)

从 1 与 0 计数

在CSS中，n变量从0开始计数。因此，如果使用表达式4n，它将选择索引为0、4、8等的元素 在。如果您想从 1 开始计数，可以使用表达式 4n 1 代替。

以上是如何使用 :nth-child() 高效地选择 CSS 中的每第 N 个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！