如何使用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:选择作为参数传递的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> 
	        p:nth-child(2) { 
	            color: red; 
	            font-weight: bold; 
	            font-size: 20px; 
	        } 
	    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
</body> 
  
</html>

效果图:

49b11ebc8763959abe4875fda9a3db9.png

示例2:选择偶数子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> 
	        p:nth-child(even) {
	            color: red; 
	            font-weight: bold; 
	            font-size: 20px; 
	        } 
	    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
</body> 
  
</html>

效果图:

da5733a9f40a87211b1bfbc9048dd96.png

示例3:选择奇数子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> 
	        p:nth-child(odd) {
	            color: red; 
	            font-weight: bold; 
	            font-size: 20px; 
	        } 
	    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
</body> 
  
</html>

效果图:

8c5e2b1a68dfe734e9c3953bf1a6879.png

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style> 
	        p:nth-child(3n + 2) {
	            color: red; 
	            font-weight: bold; 
	            font-size: 20px; 
	        } 
	    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
</body> 
  
</html>

效果图:

6cd165ec55ef866a19cd4f7ca0a93be.png

以上就是如何使用CSS获取特定位置的子元素?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏