该用div而非hr：当“加线”仅需视觉分隔而非语义分隔时，如卡片底部、菜单项间、表单字段组下方；hr仅适用于内容发生明确主题断裂的场景，如小说段落切换、文档小节之间。
什么时候该放弃 hr 改用 div？
95% 的“加一条线”需求其实不需要语义分隔——比如卡片底部、菜单项之间、表单字段组下方。这些场景里用 hr 会向屏幕阅读器发出“主题已切换”的错误信号，反而干扰用户理解。
判断依据很简单：前后内容是否属于同一逻辑单元？ 是 → 用 CSS 控制间距或边框；否 → 才考虑 hr。
- 同一注册流程里的“联系信息”和“收货地址”区块 → 用
margin-bottom或border-bottom - 导航栏中“首页”“关于”“服务”三项之间 → 用
nav ul li::after加竖线，不破坏导航语义 - 暗色模式下需自动适配颜色的分隔线 →
div配合color-scheme: light dark或媒体查询，hr无法原生支持
hr 的合法使用场景有哪些？
只有当内容发生明确的主题断裂时，hr 才是正确选择。它不是视觉工具，而是结构信标——浏览器、搜索引擎、屏幕阅读器都依赖它识别文档脉络。
典型合规用例：
- 小说中从“办公室日常”切到“梦境回忆”段落之间
- 技术文档里“部署步骤”小节结束后，紧接着“故障排查”小节
- 博客正文末尾与“相关推荐”之间，且推荐内容明显跨领域（如前端教程后推旅行游记）
注意：hr 必须独立于 p 存在，不能嵌套，不能带 alt、width 等废弃属性。
怎么写一个真正可用的 div 替代方案？
最简可控的替代是 <div class="divider"></div>，但关键不在标签本身，而在上下文处理方式。
基础样式建议：
div.divider {
height: 1px;
background-color: var(--divider-color, #e0e0e0);
margin: 1.5rem 0;
}
必须补充的细节：
- 若需键盘可聚焦（如点击展开区域），加
tabindex="0"和role="button" - 若要居中窄线，别用
width属性，改用max-width: 60px; margin: 1.5rem auto; - 行内插入（如“或”字两侧），用
span.divider+display: inline-block; vertical-align: middle;
为什么重置 hr 样式比替换更危险？
很多人图省事，保留 hr 标签但用 CSS 彻底覆盖默认样式——这看似折中，实则埋雷。
问题在于：hr 的 ARIA role 是 separator，即使你把它压成 0.5px 高、透明背景，辅助技术仍会播报“主题分隔”。而如果它实际只是卡片底部一条细线，这个播报就是误导。
更隐蔽的风险：
- 高 DPR 屏幕上
height: 1px可能渲染为模糊像素，transform: scaleY(0.5)会进一步弱化语义强度 - 某些旧版读屏软件对自定义
hr样式响应异常，可能跳过或重复播报 - 团队协作中，后续开发者看到
hr就默认“这里有主题切换”，容易引发结构性误判
真正难的不是画线，是判断这条线到底该承担语义责任，还是只负责视觉呈现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
