如何使用 CSS `nth-of-type` 根據位置和類別選擇元素？

CSS 3 nth-of-type：限制為特定類別

CSS 3 的nth-of-type 選擇器允許開發者基於元素選擇關於他們在兄弟姐妹中的地位。但是，目前在根據類別選擇元素時存在限制。

具體來說，nth-of-type 在決定元素的位置時會考慮所有同級元素，無論其類別為何。這意味著，如果您想要選擇具有特定類別的每三個元素，僅使用 nth-of-type 無法實現此目的。

例如，在提供的 HTML 中，您想要選擇具有該類別的每三個元素「。模組」。但是，使用「.featured.module:nth-of-type(3n 3)」也會選擇「.featured.video」元素，因為它也是第三個同級元素。

解決方案

不幸的是，根據 CSS 目前的限制，沒有直接的方法將 nth-of-type 限制為特定類別。作為解決方法，您可以考慮手動為每三個“.module”元素添加一個唯一的類，例如“.module3”或“.module6”。這將允許您使用 nth-of-type 根據唯一類別進行選擇。

注意： nth-of-class 不是 CSS 3 中有效的選擇器，也就是為什麼不能用它作為解決方案。

以上是如何使用 CSS `nth-of-type` 根據位置和類別選擇元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！