body :first-child选择器为什么会选中意料之外的元素？

碧海醫心

发布时间：2025-04-24 20:32:01

742人浏览过

来源于php中文网

原创

在学习css选择器时，我们经常会遇到一些意想不到的结果。今天我们将深入探讨body :first-child选择器的具体作用和选择逻辑。

:first-child 选中了什么

当我们使用如下HTML和CSS代码时：

CSS选择器学习

CSS选择器学习示例

zuojiankuohaophpcnp class="highlight"youjiankuohaophpcn这是一个带有 class="highlight" 的段落。zuojiankuohaophpcn/pyoujiankuohaophpcn
zuojiankuohaophpcnp id="unique"youjiankuohaophpcn这是一个带有 id="unique" 的段落。zuojiankuohaophpcn/pyoujiankuohaophpcn
zuojiankuohaophpcnpyoujiankuohaophpcn这是一个普通的段落。zuojiankuohaophpcn/pyoujiankuohaophpcn
zuojiankuohaophpcnpyoujiankuohaophpcn这是另一个普通的段落。zuojiankuohaophpcn/pyoujiankuohaophpcn

zuojiankuohaophpcndivyoujiankuohaophpcn
    zuojiankuohaophpcnpyoujiankuohaophpcn这是 `div` 内部的段落。zuojiankuohaophpcn/pyoujiankuohaophpcn
zuojiankuohaophpcn/divyoujiankuohaophpcn

zuojiankuohaophpcna href="#"youjiankuohaophpcn点击我zuojiankuohaophpcn/ayoujiankuohaophpcn

Lumen5 一个在线视频创建平台，AI将博客文章转换成视频下载


					
													
								相关文章
							
							
																	
										css 过渡与 cursor 样式变化_鼠标指针的动态过渡效果
									
																	
										css grid布局中gap是如何生效的_通过网格间距机制说明
									
																	
										css 初级项目中按钮宽度不一致怎么办_通过固定宽度或内边距统一
									
																	
										css 想给链接在激活时显示特殊颜色怎么办_使用 :active 伪类定义点击样式
									
																	
										css布局如何实现左固定右自适应_利用 flex 或 grid 定义列比例
									
															
													
								相关标签:
								
									css css选择器 为什么 red css html 选择器								
							
						
						本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
						
													上一篇：如何在video.js 8.22版本的流式fluid模式下限制视频最大高度？
													下一篇：字重400和500在网页设计中如何通过肉眼区分？
												
					

					
													
								
									 
										作者最新文章
									
								
																	
										
											
												如何在URL中动态拼接多个商品ID与数量参数
											
											
												2026-01-18 15:34
											
										
								
																	
										
											
												如何在 Go 项目中正确构建可执行二进制文件
											
											
												2026-01-18 15:42
											
										
								
																	
										
											
												Notepad如何设置UTF
											
											
												2026-01-18 15:43
											
										
								
																	
										
											
												OctoberCMS 静态页面不显示在后台的解决方法
											
											
												2026-01-18 15:48
											
										
								
																	
										
											
												vegas pro如何创建子剪辑
											
											
												2026-01-18 15:53
											
										
								
																	
										
											
												不再挤牙膏！Intel Ultra 9 290HX Plus跑分性能曝光：x86单核之王 秒杀桌面
											
											
												2026-01-18 16:00
											
										
								
																	
										
											
												Bandizip怎么修改解压文件存放路径
											
											
												2026-01-18 16:07
											
										
								
																	
										
											
												使用 AmpPHP 在 Magento 中实现并行处理的正确实践
											
											
												2026-01-18 16:08
											
										
								
																	
										
											
												哇叽壁纸如何下载到本地
											
											
												2026-01-18 16:08
											
										
								
																	
										
											
												如何下载安装腾讯手游助手
											
											
												2026-01-18 16:08
											
										
								
															
						
						
							
								 
									热门AI工具
								
								更多
							

							
																	
										
											
											
												DeepSeek
												幻方量化公司旗下的开源大模型平台
																									
																												AI大模型
																													开放平台
																											
																							
										
									
																	
										
											
											
												豆包大模型
												字节跳动自主研发的一系列大型语言模型
																									
																												AI大模型
																											
																							
										
									
																	
										
											
											
												通义千问
												阿里巴巴推出的全能AI助手
																									
																												AI大模型
																											
																							
										
									
																	
										
											
											
												腾讯元宝
												腾讯混元平台推出的AI助手
																									
																												文档处理
																													Excel 表格
																											
																							
										
									
																	
										
											
											
												文心一言
												文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。
																									
																												AI大模型
																													中文写作
																											
																							
										
									
																	
										
											
											
												讯飞写作
												基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿
																									
																												中文写作
																													写作工具
																											
																							
										
									
																	
										
											
											
												即梦AI
												一站式AI创作平台，免费AI图片和视频生成。
																									
																												图片拼接
																													图画生成
																											
																							
										
									
																	
										
											
											
												ChatGPT
												最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。
																									
																												AI大模型
																													中文写作
																											
																							
										
									
																	
										
											
											
												智谱清言 - 免费全能的AI助手
												智谱清言 - 免费全能的AI助手
																									
																												AI大模型
																													PDF 文档


			
				
                    
                
				
					
						 
							相关专题
						
						更多
					
					
													
								
								
									css
									css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。
									
										 
											524
										
										 
											2023.06.15
										
									
								
							
													
								
								
									css居中
									css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。
									
										 
											263
										
										 
											2023.07.27
										
									
								
							
													
								
								
									css如何插入图片
									cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面，使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。
									
										 
											758
										
										 
											2023.07.28
										
									
								
							
													
								
								
									css超出显示...
									在CSS中，当文本内容超出容器的宽度或高度时，可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章，相关教程，供大家免费体验。
									
										 
											539
										
										 
											2023.08.01
										
									
								
							
													
								
								
									css字体颜色
									CSS中，字体颜色可以通过属性color来设置，用于控制文本的前景色，字体颜色在网页设计中起到很重要的作用，具有以下表现作用：1、提升可读性；2、强调重点信息；3、营造氛围和美感；4、用于呈现品牌标识或与品牌形象相符的风格。
									
										 
											761
										
										 
											2023.08.10
										
									
								
							
													
								
								
									什么是css
									CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页（或其他基于 XML 的文档）样式与布局的标记语言，CSS的作用和意义如下：1、分离样式和内容；2、页面加载速度优化；3、实现响应式设计；4、确保整个网站的风格和样式保持统一。
									
										 
											605
										
										 
											2023.08.10
										
									
								
							
													
								
								
									css三角形怎么写
									CSS可以通过多种方式实现三角形形状，本专题为大家提供css三角形怎么写的相关教程，大家可以免费体验。
									
										 
											560
										
										 
											2023.08.21
										
									
								
							
													
								
								
									css设置文字颜色
									CSS（层叠样式表）可以用于设置文字颜色，这样做有以下好处和优势：1、增加网页的可视化效果；2、突出显示某些重要的信息或关键字；3、增强品牌识别度；4、提高网页的可访问性；5、引起不同的情感共鸣。
									
										 
											396
										
										 
											2023.08.22
										
									
								
							
													
								
								
									Java JVM 原理与性能调优实战
									本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。
									
										 
											0
										
										 
											2026.01.20
										
									
								
							
											
				

				
					
						 
							热门下载
						
						更多
					
					
						
							网站特效   /
							网站源码  /
							网站素材  /
							前端模板 
						
						
															
									
										
										[图片特效]HTML5食谱卡片滑动切换特效
									
								
															
									
										
										[表单按钮]jQuery勾选购物车数量增加减少代码
									
								
															
									
										
										[表单按钮]jQuery弹出式表单效果
									
								
															
									
										
										[图片特效]jQuery淡出淡入带缩略图幻灯片
									
								
															
									
										
										[表单按钮]jQuery右下角留言表单代码
									
								
															
									
										
										[表单按钮]jquery实现3D立体表单
									
								
															
									
										
										[图片特效]jQuery图片点击全屏预览特效
									
								
															
									
										
										[表单按钮]jQuery圆形修边注册表单
									
								
															
									
										
										[图片特效]简单带标题jQuery焦点图
									
								
															
									
										
										[表单按钮]jQuery微信开放平台注册表单
									
								
													
						
															
									
										
										[其它模板]思翔企(事)业单位文件柜 build 20080313 
									
								
															
									
										
										[企业站源码]雅龙智能装备工业设备类WordPress主题1.0 
									
								
															
									
										
										[电商源码]威发卡自动发卡系统 
									
								
															
									
										
										[电商源码]卡密分发系统 
									
								
															
									
										
										[电商源码]中华陶瓷网 
									
								
															
									
										
										[电商源码]简洁粉色食品公司网站 
									
								
															
									
										
										[电商源码]极速网店系统 
									
								
															
									
										
										[电商源码]淘宝妈妈_淘客推广系统 
									
								
															
									
										
										[电商源码]积客B2SCMS商城系统 
									
								
															
									
										
										[电商源码]CODEC2I 众筹系统 
									
								
													
						
															
									
										
										[网站素材]商场购物促销海报PSD模板设计下载 
									
								
															
									
										
										[网站素材]甜蜜多汁派对卡设计素材下载 
									
								
															
									
										
										[网站素材]包裹盒卡片样机展示ps素材下载 
									
								
															
									
										
										[网站素材]披萨特价折扣美食海报设计下载 
									
								
															
									
										
										[网站素材]复古海浪灯塔装饰画矢量素材 
									
								
															
									
										
										[网站素材]手绘烘焙面包坊菜单矢量模板 
									
								
															
									
										
										[网站素材]超级快餐美食折扣海报PSD模板下载 
									
								
															
									
										
										[网站素材]2026新春纳福金葫芦矢量素材 
									
								
															
									
										
										[网站素材]手机特价宣传海报PSD素材下载 
									
								
															
									
										
										[网站素材]游戏手柄特价折扣方形海报PSD下载 
									
								
													
						
															
									
										
										[前端模板]驾照考试驾校HTML5网站模板 
									
								
															
									
										
										[前端模板]驾照培训服务机构宣传网站模板 
									
								
															
									
										
										[前端模板]HTML5房地产公司宣传网站模板 
									
								
															
									
										
										[前端模板]新鲜有机肉类宣传网站模板 
									
								
															
									
										
										[前端模板]响应式天气预报宣传网站模板 
									
								
															
									
										
										[前端模板]房屋建筑维修公司网站CSS模板 
									
								
															
									
										
										[前端模板]响应式志愿者服务网站模板 
									
								
															
									
										
										[前端模板]创意T恤打印店网站HTML5模板 
									
								
															
									
										
										[前端模板]网页开发岗位简历作品展示网页模板 
									
								
															
									
										
										[前端模板]响应式人力资源机构宣传网站模板 
									
								
													
					
					

				

				
					
                



				
					
						 
							相关下载
						
						更多
					
					
											php商城系统
											淘源码商城PHP淘宝查信誉
											PHP房产程序[BBWPS]
											PHP简约自动发卡平台个人版
											ERMEB域名PHP离线网络授权系统
											Difeye-敏捷的轻量级PHP框架
											大泉州汽车网PHP整站程序
										

				

				
					
						 
							精品课程
						
						更多
					
					
						
							相关推荐   /
							热门推荐  /
							最新课程 
						
						
													
								
									
								
								
									Sass 教程

									
										共14课时 | 0.8万人学习
									
								
							
													
								
									
								
								
									Bootstrap 5教程

									
										共46课时 | 2.9万人学习
									
								
							
													
								
									
								
								
									CSS教程

									
										共754课时 | 21万人学习
									
								
							
												

						
															
									
										
									
									
										JavaScript ES5基础线上课程教学

										
											共6课时 | 8.5万人学习
										
									
								
															
									
										
									
									
										最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

										
											共79课时 | 151.3万人学习
										
									
								
															
									
										
									
									
										phpStudy极速入门视频教程

										
											共6课时 | 53.4万人学习
										
									
								
													

						
															
										
											
										
										
											最新Python教程 从入门到精通

											
												共4课时 | 6.3万人学习
											
										
									
																
										
											
										
										
											JavaScript ES5基础线上课程教学

											
												共6课时 | 8.5万人学习
											
										
									
																
										
											
										
										
											PHP新手语法线上课程教学

											
												共13课时 | 0.9万人学习
											
										
									
														
						

					
				

				
					
						 
							最新文章
						
						更多
					
					
													css布局文字和按钮垂直居中如何做_通过 flex align-items 或 line-height
													css 伪类与链接状态_使用 :link、:visited、:active、:hover 修改链接样式
													css 工具与框架的性能影响_如何优化框架的加载速度
													css动画可以同时执行多个吗_css动画多动画叠加说明
													css 动画只执行一半就停止怎么办_检查 keyframes 是否完整定义
													css 过渡与 cursor 样式变化_鼠标指针的动态过渡效果
													css grid布局中gap是如何生效的_通过网格间距机制说明
													csshover下::after元素阴影不平滑怎么办_使用transition box shadow控制过渡
													css 初级项目中按钮宽度不一致怎么办_通过固定宽度或内边距统一
													css 想给链接在激活时显示特殊颜色怎么办_使用 :active 伪类定义点击样式