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)

h1.png

3.如果list3最后一个元素的class为hha,把字体颜色改为orange

阅读 3.1k

推荐阅读
漫漫前端路
用户专栏

在前端生涯的成长之路

2 人关注
6 篇文章
专栏主页