如何將 CSS3'nth-of-type”選擇器限制為特定類別？

將nth-Type CSS 3 選擇器限制為類別

如您提供的範例所示，CSS 3 的nth-of -type 選擇器是基於關於元素類型，而不是特定的類別。當您想要將第 n 個類型的選擇限制為特定類別時，這可能會帶來挑戰。

使用 nth-child 的替代方法

Since nth-of-類別不存在，另一種解決方案是使用 nth-child。第 n 個子元素選擇器根據其在父元素的子元素中的位置來選擇元素。

這是修改後的CSS：

.featured.module:nth-child(3n+3) {
  padding-right: 0;
  background: red;
}

在此修訂後的代碼中，不是針對每第三個n- of-type，我們選擇每三個具有「module ”類別的子元素。這種方法實現了每隔三個 .module 元素設定樣式的預期效果。

手動添加類別

另一個選項，如提供的解決方案中提到的，是手動添加每三個 .module 就有一個新類別。這種方法需要更多的手動工作，但它可以更好地控制元素選擇。

請記得相應修改您的 CSS：

.featured.module-third {
  padding-right: 0;
  background: red;
}

以上是如何將 CSS3'nth-of-type”選擇器限制為特定類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！