如何使用 CSS 的 :nth-child() 選擇器選擇每第 N 個元素？

使用 CSS 選擇每個第 N 個元素

處理一組元素時，您可能想要定位每個第 n 個元素。 CSS 提供了 :nth-child() 選擇器來促進此任務。

:nth-child(n) 允許您選擇父元素中的第 n 個子元素。可以指定第 n 個值並執行加法、減法和係數乘法等算術運算。

div:nth-child(4)

此選擇器將選取第四個 div 元素。但是，它需要為每個第 n 個元素編寫單獨的選擇器。

:nth-child(an) 顯著簡化了這個過程。 「a」表示可以使用算術運算應用於「n」的係數：

div:nth-child(4n)

此選擇器將選擇每四個 div 元素，有效地取代了對多個選擇器的需要。

為了更好的控制，可以在選擇器中使用算術表達式：

• :nth-child(an b)
• :nth-child( an - b)
• :nth-child(a*n)

範例： 至僅選擇div 元素，不包括h1 或p 等其他元素，使用:nth-of-type()而不是:nth-child():

body div:nth-of-type(4n)

注意：如果n省略，則預設為1，選擇每個元素。

之間的差異4n 和4n 4:

兩個選擇器每四個div 配對一次

• : nth-child(4n) 從0 開始計數，所以會選擇位置4、8、12的元素，等等
• :nth-child(4n 4)從4開始計數，所以它選取位置 4、8、12 等處的元素

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