Correcting teacher:WJ
Correction status:qualified
Teacher's comments:写的不错,下次一天的作业合在一块写!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>结构伪类选择器:分组(不区分元素类型)</title>
<style>
/* 分组结构伪类分二步 */
/* 元素按组分 */
/* 在分组中根据索引进行选择、 */
.h3-title span:last-of-type {
background-color: rebeccapurple;
}
/* 在分组中匹配任何一个 */
.h3-title span:nth-of-type(3) {
font-size: 40px;
}
/* 前3个 */
.h3-title span:nth-of-type(-n + 3) {
color: red;
}
/* 最后三个 */
.h3-title span:nth-last-of-type(-n + 3) {
color: blue;
}
</style>
</head>
<body>
<div class="h3-title">
<div class="wsp">我是第1行</div>
<div class="wsp">我是第2行</div>
<div class="wsp">我是第3行</div>
<span class="wsp">我是第4行</span>
<span class="wsp">我是第5行</span>
<span class="wsp">我是第6行</span>
<span class="wsp">我是第7行</span>
<span class="wsp">我是第8行</span>
<span class="wsp">我是第9行</span>
</div>
</body>
</html>