CSS | :nth-child() 选择器

CSS 中的:nth-child()选择器用于根据元素在一组兄弟元素中的位置来匹配元素。它匹配第 n 个子元素的每个元素。

句法：

:nth-child(number) {
    //CSS Property
}

其中number是表示匹配元素模式的参数。它可以是奇数、偶数或函数符号。

• 奇数：表示一系列中位置为奇数的元素：1、3、5等。
• even：表示在一系列中位置为偶数的元素：2、4、6等。
• 功能符号 ()：它表示对于 n 的每个正整数或零值，其兄弟位置与模式 An+B 匹配的元素。

示例 1：在此示例中，选择了每个奇数段落。使用的公式是 2n+1，即选择 1、3、5 等段落。

    
        
        
    
    
        

            GeeksforGeeks
        
        

            CSS :nth-child Selector
        
      
        
A computer science portal for geeks.
        
Geeks classes an extensive classroom programme.
          
    

输出：

示例 2：在此示例中，每个偶数

都被选中，即 2、4、6 等。

    
        
        
    
    
        

            CSS :nth-child Selector
        
        
Sorting Algorithms
        

        
Quick sort.
        
Merge sort.
        
Insertion sort.
        
Selection sort.
          
        
          
    

输出：

支持的浏览器： :nth-child() 选择器支持的浏览器如下：

• 苹果 Safari 3.2
• 谷歌浏览器 4.0
• 火狐 3.5
• 歌剧 9.6
• 浏览器 9.0