CSS中层次、属性、结构伪类选择器

层次选择器

CSS中层次、属性、结构伪类选择器_第1张图片

 

注意: 这些选择器最终的控制对象都是F!

实际应用中, 后代选择器和子元素选择器是使用得较多的!

 

属性选择器

CSS中层次、属性、结构伪类选择器_第2张图片

结构伪类选择器

E:first-child 选择的是在同级元素中排第1位的E元素

E:last-child 选择的是在同级元素中排最后1位的E元素

E:nth-child(n) 选择的是在同级元素中排第n位的E元素

E:first-of-type 选择的是同级E元素中排第1位的E元素

E:last-of-type

E:nth-of-type

 

条纹状表格:

tr:nth-child(2n+1){

}

层次选择器代码案例:



    
        
        层次选择器
        
    
    
        a标签
        


        
    

结构伪类选择器代码案例:



    
        
        结构伪类选择器
        
    
    
        
        span
        

p1


        

p2


        

p3


        

            span2
            

p4


            

p5


            span2
            

p6


        

        

p7


        

                
  • li1

  •             
  • li2

  •             
  • li3

  •             
  • li4

  •         

        

          

                
  • li1

  •             
  • li2

  •             
  • li3

  •             
  • li4

  •           

        

    

属性选择器代码案例:



    
        
        属性选择器
        
    
    
        

段落


        学生
        

            用户名称:

            用户密码:

            
        

    

你可能感兴趣的:(CSS中层次、属性、结构伪类选择器)