理解CSS中的first-child用法

列了三个例子,可以对比着看:

https://codepen.io/bluesailor/pen/MWWXPZv

https://codepen.io/bluesailor/pen/zYYamMW

https://codepen.io/bluesailor/pen/JjjZeaP

代码基本相同,只是p段落的位置不同。

下面这段代码的含义:是p标签的父一级标签(这里p的父一级标签为div, div的父一级标签为body)(父标签中的第一个标签:如果是p 就是红字)

p:first-child{color: red}

p:first-of-type 就省事了,不用管位置,就是来查找第一个是p的标签来给他定义属性。