如何使用 CSS 设置备用表格行颜色？ - 芒果文档

📌 相关文章

📜 如何使用 CSS 设置备用表格行颜色？

📅 最后修改于: 2021-09-01 02:45:24 🧑 作者: Mango

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

句法：

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

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

奇数：表示序列中位置为奇数的元素：1、3、5等。
句法：
```
element:nth-child(even)
```
even：表示在一系列中位置为偶数的元素：2、4、6等。
句法：
```
element:nth-child(odd)
```

示例 1：它将颜色设置为交替表中的偶数行。



      

      
    
    

  

    
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
    Name Designation Salary
Steve Manager 1,00,000
SURAJ Assistant Manager 50,000
Khushboo Analysist 65,000
Kartik Worker 20,000
Saksham Worker 20,000

输出：

示例 2：它将颜色设置为交替表中的奇数行。



      

    
        Set alternate row in table
    
      
    

  

    
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
    Name Designation Salary
Steve Manager 1, 00, 000
SURAJ Assistant Manager 50, 000
Khushboo Analysist 65, 000
Kartik Worker 20, 000
Saksham Worker 20, 000

输出：