div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别

:first-of-type 表示一组兄弟元素中其类型的第一个元素

html部分：

<div class="ct02">
  <p>012</p>
  <p>034</p>
  <h3>056</h3>
</div>
<div class="ct02">
  <h3>078</h3>
  <p>0910</p>
</div>

css

.ct02 p:first-of-type:

.ct02 p:first-of-type{
    color:red
}

显示：

image.png

image.png

css

.ct02 p :first-of-type

.ct02 :first-of-type{
  color:red
 }

image.png

得到：

image.png

:first-child 表示在一组兄弟元素中的第一个元素

css

.ct02 p:first-child

.ct02 p:first-child{
   color:red
 }

显示：

image.png

得到：

image.png

css部分：

.ct02 :first-child

 .ct02 :first-child{
    color:red
  }

image.png

得到：

image.png