first-child，last-child，nth-child，first-of-type，last-of-type 用法

功能是: 选中A元素父元素的第一个为A元素

来看代码

图1中这样的样式浏览器未发现样式改变

解释下样式：

p的first-child的意思是选中p的父元素中第一个元素是 p的元素

现在改成如下, 在body下第一个位置添加p元素 , 这时候就选中了

first-child，last-child，nth-child，first-of-type，last-of-type 用法

父元素内的第一个元素必须是指定的元素才可以

再添加个代码

first-child，last-child，nth-child，first-of-type，last-of-type 用法

p4也变红了 , 因为他是父元素div的一个元素,符合条件

first-child，last-child，nth-child，first-of-type，last-of-type 用法

如果在p4的父元素第一行加入别的元素, 可见p4的样式又会不见

与first-child意义相反,选中的是父元素的最后一个元素 ,

参考 first-child 即可明白此元素意义

功能: 选中A元素的父元素第n个位置的A元素

first-child，last-child，nth-child，first-of-type，last-of-type 用法

此时第一个位置span 未变色,因为他不是p元素

first-child，last-child，nth-child，first-of-type，last-of-type 用法

如果改成2,则发现第二个位置变色

nth-child() 参数可以填数字,关键字,公式

比如有 odd 奇数, even 偶数 , n索引(从0开始)

与 first-child 类似 , 但是first-of-type是以元素类型为列表,来选择的

first-child，last-child，nth-child，first-of-type，last-of-type 用法

如图一: 选择的是p类型的第一个p,即符合左边选择器条件的第一个

见 first-of-type 的相反意义