如何使用 CSS'nth-of-type”將每三個元素指定為特定類別？

CSS 3 nth of type 僅限於Class

nth-of-type 選擇器可讓您選擇特定類型的每第n 個子級。但是，將此選擇限制為特定類別可能具有挑戰性。

問題：

您希望動態定位每三個 .module 元素，無論其標記如何。不過，nth-of-type 是根據元素類型計算的，而不是類別。

解：

目前沒有直接的方法來限制 nth-of - 鍵入特定的類別。一種解決方法是手動向每三個 .module 元素添加一個附加類別。

例如，在提供的 HTML 中：

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (3)</h1>
</section>

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (6)</h1>
</section>

然後套用以下 CSS 樣式：

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

現在將使用附加的 .third 來設定 .module類別每三次出現的樣式class.

注意：

此解決方法需要在新增或刪除 .module 元素時進行手動維護。對於更進階的場景，請考慮使用 JavaScript 或 CSS 預處理器自動產生必要的類別。

以上是如何使用 CSS'nth-of-type”將每三個元素指定為特定類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！