最近又把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)可以改变其数字以选择其他兄弟元素。