如何使用 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 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

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

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

<section class="featured module third">
  <h1 id="NOT-A-VIDEO">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中文网其他相关文章！