CSS3-补充-结构伪类选择器

    结构伪类选择器
        作用：在HTML中定位元素
        优势：减少对于HTML中类的依赖，有利于保持代码整洁
        场景：常用于查找某父级选择器中的子元素
        选择器：
            选择器                                    备注
            E:first-child()                 匹配父元素的第一个子元素E 
            E:last-child()                  匹配父元素的最后一个子元素E 
            E:nth-child()                   匹配父元素的第n个子元素E 
            E:nth-last-child()              匹配父元素的倒数第n个子元素E
            注意：
                1 n=0,1,2,3,4,5……
                2 通过n可以组成简单公式
                    偶数        2n,even
                    奇数        2n+1,2n-1,odd
                    前3个       -n+3
                    第3个往后    n+3

（了解）nth-of-type结构伪类选择器
        E:nth-of-type(){}   只在父元素的同类型子元素范围中匹配第n个
        区别：
            :nth-child → 直接在所有孩子中数个数
            :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

代码：

    
    
    
    
    




    

        
这是第1个li标签
        
这是第2个li标签
        
这是第3个li标签
        
这是第4个li标签
        
这是第5个li标签
        
这是第6个li标签
        
这是第7个li标签
        
这是第8个li标签
    
    

        
第1个p标签
        
第2个p标签
        
第3个p标签
        第1个span标签
        第2个span标签
        第3个span标签
        第4个span标签
        第1个超链接
        第2个超链接
        第3个超链接
        第4个超链接
        第5个超链接
    

效果图：