Dom 结构
<div id=”test”>
<span class=”hha”> 我是 span</span>
<h1 class=”hha”> 我是 h1</h1>
<h1> 我是 h1</h1>
<h1 class=”hha”> 我是 h1</h1>
<h1 class=”hha”> 我是 h1</h1>
<h1> 我是 h1</h1>
</div>
1. 指定标签
h1:first-of-type {
color: red;
// #test 底下所有的 h1 找出来，其中第一个 h1 的字体颜色改为 red；
}
2. 指定 class
.hha:first-of-type {
color: blue;
// 1. 找到所有 class 为 hha 的标签，上面的 Dom 结构里有 <h1>、<span>;
// 2. 找到 Dom 结构所有 h1、span（为了方便理解记作 list1，list2）；
// 3. 如果 list1、list2 中第一个标签的 class 是 hha，第一个 class 为 hha 的字体改为 blue;
}
举一反三，下面的代码会把字体颜色改为 orange？
.hha:last-of-type {
color: orange;
}
以 h1 标签为例，所以第一步省略。2. 找到 Dom 结构里面的所有的 h1 标签（记作 list3）
3. 如果 list3 最后一个元素的 class 为 hha，把字体颜色改为 orange