如何将 CSS3'nth-of-type”选择器限制为特定类？

将 nth-Type CSS 3 选择器限制为类

如您提供的示例中所示，CSS 3 的 nth-of-type 选择器基于关于元素类型，而不是特定的类。当您想要将第 n 个类型的选择限制为特定类时，这可能会带来挑战。

使用 nth-child 的替代方法

Since nth-of-类不存在，另一种解决方案是使用 nth-child。第 n 个子元素选择器根据其在父元素的子元素中的位置来选择元素。

这是修改后的 CSS：

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

在此修订后的代码中，不是针对每第三个 n- of-type，我们选择每三个具有“module”类的子元素。这种方法实现了每隔三个 .module 元素设置样式的预期效果。

手动添加类

另一个选项，如提供的解决方案中提到的，是手动添加每三个 .module 就有一个新类。这种方法需要更多的手动工作，但它可以更好地控制元素选择。

请记住相应地修改您的 CSS：

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

以上是如何将 CSS3'nth-of-type”选择器限制为特定类？的详细内容。更多信息请关注PHP中文网其他相关文章！