在處理一組元素時，通常需要定期選擇特定元素。例如，您可能想要選擇每第四個、第六個或第十個元素。傳統上，這是透過明確指定每個第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中文網其他相關文章！
