子元素选择器_子元素选择器11种-优快云博客

本文链接：https://blog.youkuaiyun.com/jdbfvhxx/article/details/97619979

本文详细解析了CSS中的子元素选择器，包括:first-child、:last-child、:nth-child(N)等，展示了如何精确地选取特定位置的子元素进行样式定制。通过实例代码，读者可以了解到不同选择器的应用场景及它们之间的细微差别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		 *  默认状态下标签为*
		 *  :first-child 可以选中第一个子元素
		 *  可与>子元素符搭配使用
		 *  :last-child 可以选中最后一个子元素
		 *  :nth-child(N) 可以选中任意位置元素	
		 * 		该选择器后面可以指定一个参数,指定要选中第几个子元素
		 * 		even表示偶数位置的子元素
		 * 		odd 表示奇数位置的子元素
		 * 	:first-of-type
		 *  :last-of-type
		 *  :nth-of-type
		 * 		和:first-child这些非常类似,
		 * 		只不过child,是在所有的子元素中排列
		 * 		而type是在当前类型的子元素中排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子元素选择器</title>
		<style>
			/*
			 * 为第一个p标签设置背景颜色黄色
			 *  默认状态下标签为*
			 *  :first-child 可以选中第一个子元素
			 *  可与>子元素符搭配使用
			 *  :last-child 可以选中最后一个子元素
			 *  :nth-child(N) 可以选中任意位置元素	
			 * 		该选择器后面可以指定一个参数,指定要选中第几个子元素
			 * 		even表示偶数位置的子元素
			 * 		odd 表示奇数位置的子元素
			 * 	:first-of-type
			 *  :last-of-type
			 *  :nth-of-type
			 * 		和:first-child这些非常类似,
			 * 		只不过child,是在所有的子元素中排列
			 * 		而type是在当前类型的子元素中排列
			 */
			*:first-child{
				background-color: blue;
			}
			body>div:first-child{
				background-color: yellow;
			}
			
			p:last-child{
				background-color: red;
			}
			p:nth-child(5){
				background-color: green;
			}
			p:nth-child(odd){
				background-color: pink;
			}p:nth-child(even){
				background-color: gold;
			}
			p:first-of-type{
				
			}
			body>p:last-of-type{
				background-color: red;
			}
			p:nth-of-type{
				
			}
		</style>
	</head>
	<body>
		<span >
			HELLO
		</span>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<div id="">
			<p>我是一个p标签</p>
		</div>
	</body>
</html>