CSS `nth-of-type` 可以限制為具有特定類別的元素嗎？

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

問題：

有沒有一種方法可以改進CSS 3 的nth-of-type選擇器，使其僅針對特定範圍內的元素類別？

背景：

考慮一個具有動態部分的場景，該部分具有由不同類別表示的不同佈局。目標是用“.module”類別突出顯示每第三個部分，而不影響其他元素。

解決方案：

不幸的是，沒有一種本地方法可以使用 nth-of-type 來實現這一點。原因是 CSS 不支援 nth-of-class。因此，將 nth-of-type 限制為一個類別是不可能的。

作為替代方案，有必要手動向每第三個部分添加一個新類，例如“.third-module”，並使用“.module”類。然後可以使用 nth-of-type 來定位此自訂類別。

HTML:

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

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

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

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}

此解決方案確保只有具有「.third- module」類別的「.module」部分才會收到所需的樣式，如下所示它們是第 n個類型選擇器的具體目標。

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