css选择器 :nth-of-type(1)、:nth-child(1)、:first-child、 :first-of-type

最近又把css复习了一遍，其中遇到这两个选择器，有时候会弄错，所以今天在深入了解下。

带 “:” 的选择器一般是指定元素具有某种特性。

顾名思义。:nth-child(1) 的1表示第一个元素，child表示这是一个儿子元素，就是第一个儿子元素。例子：

p:nth-child(1)有两个条件要满足，缺一不选：

1、是其父元素的第一个子元素。

2、还要是p元素。

 

:first-of-type的first表示第一个，type表示类型。例子

p:first-of-type满足一个条件

1、是其父元素的第一个p标签的元素

 

:nth-of-type(1)其实和:first-of-type一样，都是一样的含义，只是:nth-of-type(1)中的1可以改变成其他的数字以选择其他的兄弟元素。

同上，:nth-child(1)和:first-child一样。只是:nth-child(1)可以改变其数字以选择其他兄弟元素。