last-of-type的理解
来源：2-23 结构类——First-Child和LastChild和nth-Child
能量咕噜略略
2020-03-31 22:19:11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
这里2-3和1-3变成红色可以理解，为什么0-3不是红色呢？这里不是使用type，那最后一个div是0-3呀，相反的，fist-of-type又可以呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
color: #f00;
}
</style>
</head>
<body>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
1-1变红，0-1变红和2-1变红
都是指定类型为div，然后在数是第几个，为什么最后的就不一样呢？
1回答
-
好帮手慕慕子
2020-04-01
同学你好，老师测试同学的第一段代码，0-3是红色的，如下：
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素
:first-of-type选择器匹配元素其父级是特定类型的第一个子元素。
两个选择元素的规律是一样的，同学可以再测试理解下，祝学习愉快！~
0
相似问题