老师 对于first-child 和last-child 这种结构类的选择器我的理解是这样的
在这些选择器进行选择时，会默认忽视第一个标签
比如这段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构类</title>
<style type="text/css">
div:first-child{
color:red;
}
/*div:last-child{
color:green;
}*/
</style>
</head>
<body>
<!-- <section></section> -->
<div>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
<div>1-4</div>
<div>1-5</div>
<div>1-6</div>
<div>1-7</div>
</div>
<div>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
</body>
</html>
这段代码的结果时1-1 1-2 1-3 2-1 都会变红
原因是，选择器忽视了第一个父级div标签，所以第一个div下面的所有标签都被当做同级，都属于第一个子元素。只要在body下第一个div前面加任意一个标签，都会使结果变为1-1 2-1是红色。
课程中只讲了这种结果，而没有讲原因。通过我的测试，我的这种猜想是正确的。
正在回答
同学你好，:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
在同学提供的代码中，下列框出的div都是其父级的首个子元素。字体颜色都会变红，
之所以红框中元素的所有子级的字体颜色都是红色，是因为给父级设置的字体颜色，子级也可以继承到。
:last-child的原理和上方的思路是一致的，同学可以根据视频中老师的讲解再理一下思路。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星