CSS中nth-child和nth-of-type的简单使用-白红宇

CSS中nth-child和nth-of-type的简单使用

阅读量：7058 次

发布时间：2019-06-28

本文共 2270 字，大约阅读时间需要 7 分钟。

ele:nth-child是查找父元素下的子元素，包括子元素类型非ele的，当子元素类型不是ele时，则不会进行任何操作；

ele:nth-of-type是查找父元素下的子元素类型为ele的元素，其是按类型进行选择，只有元素类型是ele才能进行匹配。

同样的还有first-child与first-of-type、last-child与last-of-type。

            
             JS学习范例                            nth-child(3)：选择某元素下的第三个元素
            
                     
      1
                
      2
                
      3
                
      4
                
      5
                
      6
                
      7
                
      8
                
      9
                
      10
                
      11
                
      12
                
      13
            
     
            
            nth-child(n + 6)：选择第6个元素之后的
            
                     
      1
                
      2
                
      3
                
      4
                
      5
                
      6
                
      7
                
      8
                
      9
                
      10
                
      11
                
      12
                
      13
            
     
            
            nth-child(-n + 4)：选择第4个元素之前的
            
                     
      1
                
      2
                
      3
                
      4
                
      5
                
      6
                
      7
                
      8
                
      9
                
      10
                
      11
                
      12
                
      13
            
     
            
            nth-child(4n + 1)：间隔3个选一个
            
                     
      1
                
      2
                
      3
                
      4
                
      5
                
      6
                
      7
                
      8
                
      9
                
      10
                
      11
                
      12
                
      13
            
     
            
            nth-child(5n)：每5个换行
            
                     
      1
                
      2
                
      3
                
      
                
      
      
                
      1
                
      2
                
      3