#书摘 #css #前端
《CSS 选择器世界》匹配类型的子索引伪类 —— :nth-of-type() 伪类和 :nth-last-of-type() 伪类
1. :nth-of-type() 伪类匹配指定索引的当前标签类型元素，:nth-of-type()伪类从前面开始匹配，而:nth-last-of-type()伪类从后面开始匹配。
- :nth-of-type() 伪类和 :nth-child() 伪类的相同之处是它们的语法一
- :nth-of-type() 伪类和 :nth-child() 伪类的不同之处是：:nth-of-type() 伪类的匹配范围是所有相同标签的相邻元素， 而:nth-child() 伪类会匹配所有相邻元素，忽略标签类型。
-

2. :nth-of-type() 伪类适用于特定标签组合且这些组合会不断重复的场景。在整个HTML中，这样的组合元素并不多见，较为典型的是“dt+dd”组合：


<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>​​


以及“details > summary”组合：


<details open>
<summary>订单中心</summary>
<a href>我的订单</a>
<a href>我的活动</a>
<a href>评价晒单</a>
<a href>购物助手</a>
</details>​​


这段代码中的 <a> 元素就可以使用 :nth-of-type() 伪类进行匹配。

https://memo.cosine.ren/m/355