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中文網其他相關文章!