first-of-type： 顾名思义，一定是关于类型的，出现的第一个类型的内容
first-child： 子元素中出现的第一个元素（仅仅是第一个的意思，并没有提到关于内容的）
下面是一段代码，大家可以看一下：
1.这是first-child的代码以及结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first与child的区别</title>
<style type="text/css">
p:first-child{
color: red;
}
</style>
</head>
<body>
<p>这里是p1</p>
<div>
<span>这里是span标签</span>
<p>div下的p1</p>
<p>div下的p2</p>
</div>
<p>这里是p2</p>
</body>
</html>
first-child的代码执行结果.png.png
显然，这有body中的第一个<p>标签执行了，当然first-child也是有继承性的，如果<div>下面的第一个是<p>标签的话，也会变红
所以说，first-child只代表内容
2.这是first-of-type的代码以及结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first与child的区别</title>
<style type="text/css">
p:first-of-type{
color: greenyellow;
}
</style>
</head>
<body>
<p>这里是p1</p>
<div>
<span>这里是span标签</span>
<p>div下的p1</p>
<p>div下的p2</p>
</div>
<p>这里是p2</p>
</body>
</html>
first-of-type的代码执行结果.png
网友评论