css nth-child伪类中的of关键字

在CSS的伪类选择器中，`nth-child` 和 `nth-of-type` 的区别在于它们判断元素的方式不同。`nth-child(n)` 是基于元素在父容器中的顺序来选择的，无论元素的实际类型是什么；而 `nth-of-type(n)` 则仅选择具有特定标签名的元素，并依据该标签名在同类型的元素中的顺序。

举个例子[^1]：

<div class="box">
    <p>我是第一个段落</p>
    <div>1-1</div>
    <div>2-2</div>
</div>

如果我们应用 CSS 选择器：

- `.box p:nth-of-type(1)`会选择第一个 `<p>` 元素（因为它是第一个 `<p>` 类型的元素）。
- `.box div:nth-of-type(2)`会选择第二个 `<div>` 元素（同样基于其在 `<div>` 类型下的顺序）。
- 而`.box div:nth-child(2)`会选择第二个出现在 `<div>` 容器内的元素，所以它会匹配到 `2-2`，即使它不是第一个 `<div>`。

因此，`of` 关键字在这里并不直接存在，但它用于明确指定选择器是在寻找同一类型内的第几个元素。如果想要按照元素类型计数，应该使用 `nth-of-type`；如果按照元素在整个容器中的位置计数，应使用 `nth-child`。