CSS `nth-of-type` 可以根據特定類別來選擇元素嗎？

CSS 3 的第 n 個類型可以限制為一個類別嗎？

在 CSS 3 中，可以使用第 n 個類型選擇器根據特定元素在一組相似元素中的位置來選擇特定元素。但是，此選擇器不允許根據類別來定位元素。

問題：

是否可以將 nth-of-type 套用於特定類別？例如，如何使用 .module 類別來定位每三個元素？

答案：

不幸的是，CSS 不提供內建的 nth-of-類選擇器。這意味著無法直接將 nth-of-type 限制為特定類別。

解決方案：

要達到所需的效果，您可以應用新的手動對每三個 .module 進行分類。這可以使用 JavaScript 或 Sass 等預處理器來完成。

這是使用JavaScript 的範例：

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

套用附加類別後，您可以使用以下CSS 規則來定位每三個.module:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

雖然此解決方法可能不如專用的nth-of-class 選擇器那麼優雅，它允許您使用現有的CSS 功能和JavaScript 來實現所需的功能。

以上是CSS `nth-of-type` 可以根據特定類別來選擇元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！