CSS选择器

> ：子元素选择器

空格 ：后代选择器

区别：

后代选择器：匹配父子关系和祖先-后代关系

子元素选择器：匹配父子关系，只匹配到它下面的一层，而不是多层

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E

“:first-of-type”选择器类似于“:first-child”选择器,区别于first-child可以指定元素类型,定位一个父元素下的某个类型的第一个子元素。

例子：父子关系

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

ul >li:first-child: 匹配第一个li元素

ul >li:lsat-child: 匹配最后一个li元素

父子或祖后关系

<div class="FA">
  <div>1</div>
  <div>2</div>
  <p>1</p>
  <p>2</p>
</div>

.FA >p:first-of-type:取第一个p标签

<div>
	<p>p1</p>
	<div>d1</div>
	<p>p2</p>
	<div>d2</div>
</div>

div{background: green;}

div{background: green;}
div>p:first-child{background: orange;}

div{background: green;}
div>div:first-child{background: orange;}

由以上可以知道：若非第一个子元素的标签，它的first-child就无效果。
div{background: green;}
div>div:first-of-type{background: orange;}

这时就要使用first-of-type，它能指定标签。

当然第一个P标签的first-child与first-of-type是一样的。