如何使用 :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中文網其他相關文章！