HTML5的高级选择器

1、层次选择器

form p{ color:red;}  表示后辈（后代选择器）

form>p{ color:red;}  表示子辈

div+p{ color:red;}   表示DIV下一个相邻的P元素

div~p{ color:red;}   表示DIV后所有匹配的P元素

2、结构伪类选择器

p:first-child{ color:red;} 第一个P标签

p:last-child{ color:red;}  最后一个P标签

p:nth-child(3){ color:red;} 第3个P标签

p:first-of-type{ color:red;} 第一个P标签

p:last-of-type{ color:red;}  最后一个P标签

p:nth-of-type(3){ color:red;} 第3个P标签

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。