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

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

html部分：

  
012
  
034
  
056


  
078
  
0910

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