css3第四篇，选择器三(伪类选择器一）

伪类选择器一

语法 ：。指定选择器特殊情况下的属性以及属性值

结构伪类选择器

1.:nth-child:根据定义的标签顺序,来给指定的标签添加样式。先找到符合顺序的标签，再匹配标签是否符合设定的类型。

选择器	作用
:first-child	所有标签中的第一个,并且要符合设定的标签类型
:last-child	所有标签中的最后一个,并且要符合设定的标签类型
:nth-child()	符合指定顺序的标签.()当中可写内容:一个数值,表示指定的顺序;英文单词odd奇数标签even偶数标签.公式:a*n +/- b,公式没有固定的写法,完全根据需求而定,a,b是根据需求自行设定的数字,n是css3系统规定的,从0开始的整数,将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果
nth-last-child()	与nth-child()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-child(3)

举例1： 

    
    
    



    

        
北京1
        
北京2
        
北京3
        
北京4
        
北京5
        
北京6
        
北京7
        
北京8
    

举例2：请看注释。 

    
    
    



    

        百度1
        百度2
        广州1
        广州2
        
重庆1
        
重庆2
        
重庆3
        
重庆4
        
重庆5
        
重庆6
        
武汉
    

举例3： 

    
    
    



    

        
北京1
        
北京2
        
北京3
        
北京4
        
北京5
        
北京6
        
北京7
        
北京8
        
北京9
        
北京10
        
北京11
        
北京12
        
北京13
        
北京14
        
北京15
        
北京16
    
    

        北京1
        北京2
        上海
        北京3
        北京4
        北京5
        北京6
        北京7
        北京8
    
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

 举例4：

    
    
    



    

        
北京1
        
北京2
        
北京3
        
北京4
        
北京5
        
北京6
        
北京7
        
北京8
        
北京9
        
北京10
        
北京11
        
北京12
        
北京13
    

举例5： 

    
    
    



    

        

            你所在的地区
            *
            (必填,单选)
        
    
    

        

            你的性别
            *
            (必填,单选)
        
    
    

        

            你的年龄
            *
            (必填,单选)
        
        

            

                

                    18岁以下
                
                

                    18岁~25岁
                
                

                    26岁~34岁
                
                

                    35岁~44岁
                
                

                    44岁以上
                
            
        
    

 2:nth-of-type.先找到所有符合类型的标签,再按照顺序给指定位置的标签添加样式

选择器	说明
:first-of-type	所有符合设定类型的标签中的第一个
:last-of-type	所有符合设定类型的标签中的最后一个
:nth-of-type()	符合指定顺序的标签,()当中可写内容:一个数值表示指定的顺序,英文单词odd奇数标签、even偶数标签.公式a*n +/- b公式没有固定的写法,完全根据需求而定a,b是根据需求自行设定的数字n是css3系统规定的,从0开始的整数将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果
nth-last-of-type()	与nth-of-type()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-of-type(3),所有符合设定类型的标签中的倒数第三个标签

    
    
    



    

        新浪
        搜狐
        北京
        搜狐
        上海
        搜狐
        重庆
        搜狐
        天津
        广州
        武汉
        长沙
    

 总结:child先数数,先找顺序,再看当前位置标签是否符合设定标签类型;of-type先找到所有的符合类型的标签,不符合类型的标签不参与,再找顺序符合设定顺序的标签.