如何使用 `nth-child()` 有效率地選擇 CSS 中的每個第 N 個元素？

選擇CSS 中的每個第N 個元素

CSS 中的nth-child() 選擇器提供了一種便捷的方法來定位其內的特定子元素父元素。然而，單獨列出第 n 個孩子可能會很麻煩。有沒有更有效率的方法？

在nth-child() 中使用算術表達式

nth-child() 的真正強大之處在於它能夠合併算術使用「n」變數的表達式。此變數表示子元素在其父元素中的位置。

每4 個元素的簡化選擇器

要選擇每四個div 元素，請將各個選擇器替換為以下：

div:nth-child(4n)

此表達式表示選擇器符合任何4 的倍數的div 元素（例如，0, 4, 8, 12）。

透過算術自訂

n 變數允許進一步自訂。例如：

• 2n - 1：符合奇數個 div 元素（例如 1、3、5）。
• 4n 2：符合位置為4 的倍數以上的div 元素（例如2、 6, 10).

均衡算術表達式

雖然4n 和4n 4乍看之下似乎相同，但其實不然。 nth-child() 從 0 開始計數。 4n 將符合位置 0, 4, 8 的元素，而 4n 4 將符合位置 4, 8, 12 的元素。

以上是如何使用 `nth-child()` 有效率地選擇 CSS 中的每個第 N 個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！