使用CSS获取特定位置的子元素

想要使用CSS获取特定位置的子元素，可以使用CSS :nth-child()选择器。:nth-child()选择器仅用于选择属于其父级的第n个子级（无论类型如何）的元素。下面本篇文章就来给大家介绍一下CSS :nth-child()选择器，希望对大家有所帮助。

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

语法：

: nth-child(arg) {
    // CSS样式
}

参数：

其中arg是表示匹配元素的模式的参数。它可以是一个数字（number）、一个关键字（odd 或 even）或一个线性方程。

●　number：表示其位置由参数指定的元素。

●　odd：表示位置为奇数的元素，即1,3,5等。

●　even：代表位置均匀的元素，即2,4,6等。

●　线性方程：表示每个正整数n的位置与模式A * n + B匹配的元素。n的值从零开始。

示例1：选择作为参数传递的元素

	
		
		 
 
  
 
    
Hello World！
 
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
 
  

效果图：

示例2：选择偶数子元素

	
		
		 
 
  
 
    
Hello World！
 
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
 
  

效果图：

示例3：选择奇数子元素

	
		
		 
 
  
 
    
Hello World！
 
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
 
  

效果图：

示例4：将线性等式作为参数

	
		
		 
 
  
 
    
Hello World！
 
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
    
Hello World！
 
  

效果图：

---

本文参考地址：https://www.html.cn/qa/css3/10359.html