css - nth-of-type(1) 和 first-of-type 伪类之间的区别

Question

我很好奇 nth-of-type(1) 和 first-of-type 有什么区别。从我的用法来看，它们似乎做同样的事情，但是如果它是第一个元素，每个代码示例都将使用第一个类型而不是第 n 个类型（1）。

两者有什么区别？

标签： csscss-selectors

Answer 1

从规范：

与 相同:nth-of-type(1)。:first-of-type伪类表示一个元素，它是其类型的第一个兄弟元素。

它们是相同的，我们都同意这一点，但我们可能需要它们用于不同的用例。

想象一下我需要编写一个 SASS 循环来创建基于索引的选择器的情况。我将使用:nth-of-type

前任：

@for $i from 1 through $n {
 .container > div:nth-of-type(#{$i}) { ... }
}

有时我只需要定位第一个元素，这样我就可以简单地使用first-of-type这将使代码更易于阅读。