CSS `nth-of-type` 可以根据特定类选择元素吗？

CSS 3 的第 n 个类型可以限制为一个类吗？

在 CSS 3 中，可以使用第 n 个类型选择器根据特定元素在一组相似元素中的位置来选择特定元素。但是，此选择器不允许根据类来定位元素。

问题：

是否可以将 nth-of-type 应用于特定类？例如，如何使用 .module 类来定位每三个元素？

答案：

不幸的是，CSS 不提供内置的 nth-of-类选择器。这意味着无法直接将 nth-of-type 限制为特定类。

解决方案：

要达到所需的效果，您可以应用新的手动对每三个 .module 进行分类。这可以使用 JavaScript 或 Sass 等预处理器来完成。

这是使用 JavaScript 的示例：

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

应用附加类后，您可以使用以下 CSS 规则来定位每三个 .module:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

虽然此解决方法可能不如专用的 nth-of-class 选择器那么优雅，它允许您使用现有的 CSS 功能和 JavaScript 来实现所需的功能。

以上是CSS `nth-of-type` 可以根据特定类选择元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！