css选择class中的第一个怎么选？使用first-of-type？

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