如何使用 CSS `nth-of-type` 根据位置和类别选择元素？

CSS 3 nth-of-type：限制为特定类

CSS 3 的 nth-of-type 选择器允许开发者基于元素选择关于他们在兄弟姐妹中的地位。但是，目前在根据类选择元素时存在限制。

具体来说，nth-of-type 在确定元素的位置时会考虑所有同级元素，无论其类如何。这意味着，如果您想要选择具有特定类的每三个元素，仅使用 nth-of-type 无法实现此目的。

例如，在提供的 HTML 中，您想要选择具有该类的每三个元素“。模块”。但是，使用“.featured.module:nth-of-type(3n 3)”也会选择“.featured.video”元素，因为它也是第三个同级元素。

解决方案

不幸的是，根据 CSS 当前的限制，没有直接的方法将 nth-of-type 限制为特定类。作为解决方法，您可以考虑手动向每三个“.module”元素添加一个唯一的类，例如“.module3”或“.module6”。这将允许您使用 nth-of-type 根据唯一类进行选择。

注意： nth-of-class 不是 CSS 3 中的有效选择器，即为什么不能用它作为解决方案。

以上是如何使用 CSS `nth-of-type` 根据位置和类别选择元素？的详细内容。更多信息请关注PHP中文网其他相关文章！