#书摘 #css #前端
《CSS 选择器世界》匹配类型的子索引伪类 —— :first-of-type 伪类和 :last-of-type 伪类和 :only-of-type 伪类
匹配类型的子索引伪类类似于子索引伪类，区别在于，匹配类型的子索引伪类是在同级列表中相同标签元素之间进行索引与解析的。

写HTML的时候要注意使用语义化标签，甚至可以使用自定义标签，因为要想使本节中的这些伪类在项目中大放异彩，离不开标签的区分，如果全部都是类是在同级列表中相元素，就无法使用这些伪类。

1. :first-of-type 表示当前第一个标签类型的元素。例如：


dl > :first-of-type {
color: deepskyblue;
font-style: italic;
}
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>​​


结果:first-of-type伪类匹配了 <dt> 和 <dd> 元素，文字表现为深天蓝色倾斜体

如果有如下HTML代码，其中有多个 <dt> 和 <dd> 元素，则对于后面的 <dt> 和 <dd> 元素，`:first-of-type` 伪类不会匹配，文字表现为默认的黑色且非倾斜体，代码如下：


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


标题2和内容2不会被匹配

2. :last-of-type 伪类的语法和匹配规则与 :first-of-type 的类似，区别在于，`:last-of-type` 伪类匹配最后一个同类型的标签元素。在上面的代码中就是匹配标题1和内容1。

3. :only-of-type 伪类
:only-of-type 表示匹配唯一的标签类型的元素。例如：
使用:only-of-type伪类也可以匹配例1中的 <dt> 和 <dd> 元素，因为这两种类型的标签均只有一个。

> :only-child伪类匹配的元素，:only-of-type伪类一定匹配。但是:only-of-type伪类匹配的元素，:only-child伪类不一定匹配。

:only-of-type伪类缺少典型的应用场景，大家需要根据实际情况适时使用。

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