结构伪类选择器主要是根据文档结构选择元素，常用于根据父选择器选择里面的子元素。让我们从一个html例子开始1、first-child用于匹配父元素中的第一个子元素（四季最美）section:first-child{color:red;}2、last-child用于匹配父元素Element(winter)中的最后一个子元素section:last-child{color:red;}3、nth-child(n)可以选择一个或多个特定的子元素中父元素n可以是数字，表示选择第n个元素，n从1开始。/*匹配第3个子元素——下*/section:nth-child(3){color:red;}n可以是关键字，even是偶数，odd是奇数/*匹配偶数的子元素——也就是第二个“春天”和第四个“秋天”*/section:nth-child(even){color:red;}n也可以是公式，常用公式如下：公式说明2n偶数2n+1奇数5n5101520...n+5从第5个元素开始到末尾（含第5个）-n+5前5个元素（含第5个）如果n为公式，则n从0开始计算，但0个元素或多于元素个数的将被忽略。4.first-of-type用于匹配父元素中指定类型的第一节div:first-of-type{color:red;此时匹配到的元素是——spring！5.last-of-type用于匹配父元素中指定类型的最后一个——wintersectiondiv:last-of-type{color:red;}6.nth-of-type(n)用于匹配父元素中指定类型的一种或多种，??n的值与nth-child相同。那么它和之前的nth-child有什么区别呢？试试这一段div:nth-of-type(3){color:red;}我们发现匹配结果变成了——“autumn”！结果不一样，是不是因为加了div元素选择器？那我可以这样写吗？sectiondiv:nth-child(3){color:red;}试试看，你会发现搭配还是“夏天”。为什么？因为nth-child会把所有有序号的盒子排列起来，执行的时候先看:nth-child(3)再回头看前面的div。如果您再次尝试以下操作，它会更清楚。sectiondiv:nth-child(1){color:red;}不是所有的文字都变红了吗？是因为:nth-child(1)选择的框是“最美的四季”，然后发现需要匹配div元素，而h2不匹配div，所以没有选择元素到底。总结：1、nth-child对父元素中的所有子元素进行排序和选择，先找到第n个子元素，然后检查是否匹配；2.nth-of-type对父元素中指定的子元素进行排序选择，找到子元素先对匹配类型的子元素进行排序，再找到第n个子元素。
