CSS的结构伪类选择器：child系列

本文链接：https://blog.youkuaiyun.com/weixin_44272970/article/details/103669471

本文介绍了CSS中的结构伪类选择器，特别是child系列，包括first-child、last-child、only-child和nth-child(n)以及nth-last-child(n)。这些选择器帮助开发者减少对类选择器和ID选择器的依赖，实现更高效的选择和样式应用。

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

前端学习经验（7）

CSS

选择器

结构伪类选择器

结构伪类选择器：减少类选择器和id选择器的定义
child系列：

first-child：选择父级元素中的第一个子元素，必须是子元素中的第一个元素

	父元素>子元素（第一个）标签:first-child{
											样式表
										 }

如：

		<head>
		  <style>
	   		.a>div:first-child{								
				          color: orange;
				          background: green;
				          width: 30px;
				          height: 30px;
   							   }
   		    .a5>span:first-child{
        				  font-family: "楷体";
            			  font-size: 50px;
   							   }
	   	  </style>
	    </head>
		<body>
			<div class = "a">
                 <div>子元素1</div>
                 <h1>子元素2</h1>
                 <p>子元素3</p>
                 <span>子元素4</span>
                 <div class = "a5">子元素5
                  	<span>子元素5.1</span>
                  	<p>子元素5.2</p>
                  	<div>子元素5.3</div>
                 </div>
                 <div>子元素6</div>
	 		 </div>
		</body>

last-child：选择父级元素中的最后一个子元素，必须是子元素中的最后一个元素

	父元素>子元素（最后一个）标签:last-child{
											样式表
										  }

如：

		  <head>
			  <style>
		   		.a>div:last-child{								
					          color: orange;
					          background: green;
					          width: 30px;
					          height: 30px;
       							   }
       		    .a5>p:last-child{
            				  font-family: "楷体";
                			  font-size: 50px;
       							   }
		   	  </style>
		    </head>
			<body>
				<div class = "a">
	                 <div>子元素1</div>
	                 <h1>子元素2</h1>
	                 <p>子元素3</p>
	                 <span>子元素4</span>
	                 <div class = "a5">子元素5
	                  	<span>子元素5.1</span>
	                  	<div>子元素5.2</div>
	                  	<p>子元素5.3</p>
	                 </div>
	                 <div>子元素6</div>
		 		 </div>
			</body>

only-child：选择父级元素中的唯一的一个子元素，必须是子元素中的唯一的一个元素,用于场景判断

			父元素>子元素（唯一一个）标签:only-child{
													样式表
												  }

如：

		  <head>
			  <style>
		   		.a>div:only-child{								
					          color: orange;
					          background: green;
					          width: 30px;
					          height: 30px;
       							  }
       		  </style>
		    </head>
			<body>
				<div class = "a">
	                 <div>唯一的子元素</div>
		 		</div>
			</body>

nth-child(n)：选择父级元素的第n个子元素。(正着找符合条件的子元素)，n：可以使用数字，函数，英文等。
数字：1，2，3，…
公式：如 2n+1，3n+1，…
英文：odd(奇数)，even(偶数)

		父元素>子元素（指定第几个）标签:nth-child(n){
													样式表
												 }

如：

  				<head>
				  <style>
				   	 .a>li:nth-child(2n+1){								
	                            font-family: "宋体";
	                            font-size: 50px;
	                            background: green;
	                                    }
	                  .a>li:nth-child(1){								
	                            font-family: "黑体";
	                            font-size: 100px;
	                            background: red;
	                                    }                  
	                 .a>li:nth-child(even){
	                            font-family: "楷体";
	                            font-size: 50px;
	                            background: orange;
	                                    }
			   	  </style>
			    </head>
				<body>
					<ul class="a">
		                  <li>子元素1</li>
		                  <li>子元素2</li>
		                  <li>子元素3</li>
		                  <li>子元素4</li>
		                  <li>子元素5</li>
		                  <li>子元素6</li>
		                  <li>子元素7</li>
		                  <li>子元素8</li>
		                  <li>子元素9</li>
         			 </ul>
				 </body>

nth-last-child(n)：选择父级元素的倒数第n个子元素。(倒着找符合条件的子元素)，n：可以使用数字，函数，英文等。
数字：1，2，3，…
公式：如 2n+1，3n+1，…
英文：odd(奇数)，even(偶数)

				父元素>子元素（指定倒数第几个）标签:nth-last-child(n){
															样式表
														 }

如：

				<head>
				  <style>
				   	 .a>li:nth-last-child(2n+1){								
	                            font-family: "宋体";
	                            font-size: 50px;
	                            background: green;
	                                    }
	                  .a>li:nth-last-child(1){								
	                            font-family: "黑体";
	                            font-size: 100px;
	                            background: red;
	                                    }                  
	                 .a>li:nth-last-child(even){
	                            font-family: "楷体";
	                            font-size: 50px;
	                            background: orange;
	                                    }
			   	  </style>
			    </head>
				<body>
					<ul class="a">
		                  <li>子元素1</li>
		                  <li>子元素2</li>
		                  <li>子元素3</li>
		                  <li>子元素4</li>
		                  <li>子元素5</li>
		                  <li>子元素6</li>
		                  <li>子元素7</li>
		                  <li>子元素8</li>
		                  <li>子元素9</li>
         			 </ul>
				 </body>