CSS3结构伪类选择器：first-of-type、last-of-type、nth-of-type；nth-child 和 nth-of-type 的区别

• E:first-of-type：指定类型E的第一个。
• E:last-of-type：指定类型E的最后一个。
• E:nth-of-type(n)：指定类型E的第n个。

示例

first-of-type

last-of-type

nth-of-type(even)：选择偶数位置的元素

nth-of-type(odd)：选择奇数位置的元素

E:nth-child 和 E:nth-of-type 的区别

• E:nth-child 对父元素里面所有孩子排序选择（序号是固定的）。先找到第n个孩子，然后看看是否是E匹配。
• E:nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。

示例：nth-child 会先把所有的孩子都排列序号

nth-child 会把所有的孩子都排列序号。例如div:nth-child(1)在执行的时候首先执行nth-child(1)，之后会去看div。

例如，下面执行 section div:nth-child(1) 并没有选择到section 下面的第一个 div。这是因为首先执行nth-child(1)选择到的是section 下面的 p元素，而后看div，和p对应不上，所以section div:nth-child(1) 选择不到元素：

示例：nth-of-type：会先把指定类型的孩子排列上序号

例如 section div:nth-of-type(1) 执行的过程是先找到section 下面的div，然后选择第1个div：