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中文网其他相关文章！