新闻中心

在css中如何用first-of-type选中首行元素

2025-10-15
浏览次数：次
返回列表
:first-of-type用于选中父元素下同类标签的第一个元素。1. 可选中指定类型首个标签，如p:first-of-type将首个p元素文字变红；2. 在混合标签中精准定位，如div内有h2和p，p:first-of-type仅加粗首个p；3. 按标签类型区分，非所有子元素首个，若需选首个子元素应使用:first-child；4. 实际应用如去除首段上边距，p:first-of-type设置margin-top为0。关键在于理解其选择的是同类型首个而非整体首个元素。

在css中如何用first-of-type选中首行元素

在 CSS 中，:first-of-type 伪类用于选中其父元素下同类标签中的第一个元素。如果你想“选中首行元素”，需要明确你指的是什么类型的“首行”元素。下面根据不同情况说明如何使用 :first-of-type 来选中首个元素。

1. 选中某一类型标签的第一个元素

如果你有一组相同标签（如多个 p 或 div），可以使用 :first-of-type 选中其中第一个。

p:first-of-type {
  color: red;
}

这段代码会让页面中第一个 <p></p> 元素文字变红，前提是它在其父容器中是第一个 p 类型的子元素。

2. 在混合标签中精准选中首个同类元素

当父容器内包含多种标签时，:first-of-type 依然能正确识别对应类型的第一个。

例如 HTML 结构：

<div>
  <h2>标题</h2&gt;
  <p>第一段</p>
  <p>第二段</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2401">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176378189624798.png" alt="察言观数AskTable">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2401">察言观数AskTable</a>
                            <p>企业级AI数据表格智能体平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="察言观数AskTable">
                                <span>78</span>
                            </div>
                        </div>
                        <a href="/ai/2401" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="察言观数AskTable">
                        </a>
                    </div>
                
</div>

使用以下 CSS：

p:first-of-type {
  font-weight: bold;
}

只有“第一段”会加粗，因为它是所有 p 标签中的第一个，尽管前面有 h2。

3. 注意：first-of-type 是按标签类型区分的

:first-of-type 不是选中父元素的第一个子元素，而是选中第一个出现的**特定类型**的元素。比如：

  • div:first-of-type 选中第一个 div
  • span:first-of-type 选中第一个 span

如果想选中父元素的第一个子元素，不管类型，应该用 :first-child。

4. 实际应用场景

常用于跳过第一个元素的某些样式，比如去掉第一个段落的上边距：

p {
  margin-top: 20px;
}
p:first-of-type {
  margin-top: 0;
}

基本上就这些。关键是理解 :first-of-type 是“同类型中的第一个”，而不是“所有子元素中的第一个”。根据你的 HTML 结构合理使用，就能准确选中目标“首行”元素。

以上就是在css中如何用first-of-type选中首行元素的详细内容，更多请关注其它相关文章！


# 两种类型  # 天水ios关键词排名  # 秦皇岛做网站建设的企业  # 如何成为最棒的seo  # 双赢seo  # SEO痞子瑞  # 甘肃网站建设专业现状  # 股票配资营销推广手段  # 师德建设的网站有哪些  # 桐城网站优化价格实惠  # 顺丰营销推广  # 加粗  # css  # 变红  # 的是  # 其父  # 实际应用  # 中不  # 如何用  # 首个  # 第一个  # red  # html 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： J*aScript设计模式实践_j*ascript代码优化  Django模型中自动计算可用余额的实现方法  如何在CSS中使用visited与link控制链接颜色_visited link伪类配合  如何在更新Composer依赖后自动运行测试_使用post-update-cmd钩子触发PHPUnit  php源码怎么在电脑上测试_电脑测试php源码方法步骤【教程】  Composer的 "licenses" 命令如何帮助你遵守开源协议_检查项目依赖的许可证合规性  Golang如何通过reflect获取匿名字段方法_Golang reflect匿名字段方法访问技巧  如何高效处理PHP中的Excel数据导入导出？PortPHP/Spreadsheet助你轻松搞定！  TikTok评论显示延迟如何处理 TikTok评论刷新优化方法  Node.js CSV 数据处理：基于字段值条件过滤整条记录的策略  苹果手机如何防止被恶意App追踪  Golang如何优雅处理error_Golang error处理最佳实践总结  J*a 递归快速排序中静态变量的状态管理与陷阱  python3时间如何用calendar输出？  京东京造J1和网易云音乐氧气真无线有什么不同_国产电商蓝牙耳机音质对比  迅雷下载到U盘速度很慢怎么办_迅雷U盘下载慢优化方法  Excel如何用迷你图显趋势_Excel用迷你图显趋势【趋势小图】  wps文字怎么插入目录并自动更新_wps文字如何插入目录并自动更新方法  BetterDiscord插件中安全更新用户简介的实践指南  怎么在html里运行vbs脚本_html中运行vbs脚本方法【教程】  没有大陆身份证/银行卡如何实名微信？ 亲测有效的几种方法分享  支付宝如何设置安全保护_支付宝安全设置的全面教程  12306选座如何查看座位示意图_12306座位示意图解读与使用  Highcharts 雷达图径向轴标签定制指南：利用多Y轴实现数值标注  J*aScript动态修改指定div内所有a标签样式指南  Win10双系统截图高效法 截屏快捷键速记【技巧】  qq邮箱发邮件给国外发不出去_QQ邮箱国际邮件发送失败原因与解决  c++如何使用折叠表达式(Fold Expressions)_c++17可变参数模板新技巧  J*a里如何使用forEach遍历Map_Map遍历方法说明  Win10如何恢复误删的快捷方式_Win10重建常用软件快捷方式  拼多多购物车商品数量无法修改如何处理 拼多多购物车操作优化方法  ACG动漫手机版官网入口 手机ACG动漫APP在线观看正版  响应式容器内容自动缩放与宽高比维持教程  Typer应用中动态命令行参数的解析与处理  如何在Promise链中优雅地中断后续then执行  QQ邮箱网页版快速登录 QQ邮箱邮箱账号官方入口地址  韩小圈电脑版在线入口_网页版免费登录地址  J*aScriptWebpack优化_J*aScript构建工具实战  深入理解与实现最大堆的Heapify过程：常见错误与修正  微信网页版官方入口直达 微信网页版网页版登录使用方法  Win11怎么查看显卡显存 Win11显示适配器属性及专用视频内存查询  Discord Slash 命令响应超时问题的异步解决方案  夸克浏览器图书入口 夸克手机浏览器阅读入口  一加手机电池耗电快怎么办_一加手机电池耗电快的解决方法  PHP中获取MongoDB服务器运行时间（Uptime）的专业指南  Go语言JSON解析深度指南：动态访问与结构体映射实践  ArchiveofOurOwn小说阅读-ArchiveofOurOwn同人作品访问链接  Fabric模组开发：自定义物品与物品组的现代管理方法  C++如何实现一个智能指针_手动实现C++ shared_ptr的引用计数功能  iCloud登录入口网页版 苹果iCloud官网登录 

上一篇：css animation与transition结合平滑过渡
下一篇：在css中如何使用flex制作等高卡片

搜索