不合适——语义模糊且无障碍支持差，仅适用于标记过时内容；业务作废应优先用，整行删除需用css类而非包裹，纯css实现须强化视觉可访问性。

用 <s></s> 标签标记已作废的文本内容是否合适

不合适——<s></s> 标签在 HTML5 中已被降级为纯表现标签，语义模糊，且现代无障碍工具可能忽略其含义。它不表示“被删除”，只暗示“不再准确或相关”，比如旧价格、过时地址。但若你真想表达“作废”，得先确认这个“作废”是业务逻辑上的废弃（如商品下架），还是编辑动作上的删除（如撤回评论）。前者勉强可用 <s></s>，后者必须换 <del></del>。

<s></s> 和 <del></del> 的实际渲染差异在哪

浏览器默认都画一条细灰横线，视觉上几乎没区别。真正差异在 DOM 层和辅助技术层：<del></del> 支持 datetime 和 cite 属性，能被屏幕阅读器明确识别为“deleted text”；<s></s> 则常被读作普通文本，甚至被跳过。React/Vue 项目开启严格模式时，<s></s> 还会触发控制台警告。

Galileo AI

一款面向UI和产品设计的AI生成工具，可以根据设计需求快速创建可编辑的界面方案和视觉原型。

下载

• <del datetime="2026-05-20">库存充足</del> → 无障碍工具可播报“已删除：库存充足（2026年5月20日）”
• <s>¥199</s> → 多数读屏软件仅朗读“¥199”，不带语义提示
• 旧版 IE8 及更早版本对 <del></del> 的 CSS 伪类支持不稳定，需额外测试

表格整行加删除线为什么不能直接包 <tr><p>因为 <code><s></s> 和 <del></del> 都属于“短语内容（Phrasing Content）”，HTML 规范禁止它们直接包裹 <tr>、<code><td> 等流式或表格元素。浏览器会自动修复结构，把标签提到行外或丢弃，导致样式失效、DOM 错乱，甚至影响 JS 获取单元格数据。 <ul> <li>错误写法：<code><s><tr><td>A</td></tr></s> → 浏览器解析后 <s></s> 可能被移出表格，或完全不生效

正确做法：为每个 <td> 内容单独包裹，例如 <code><td><del>已取消订单</del></td>

若需统一控制样式，建议用 class + CSS：.row-deleted td { text-decoration: line-through; color: #d32f2f; }，再给 <tr> 加 class <h3>纯 CSS 实现删除线时最容易忽略的兼容性点</h3> <p>只写 <code>text-decoration: line-through 在高对比度模式（Windows 系统设置）、深色主题或部分屏幕阅读器中可能完全不可见——因为划线颜色和文字颜色一致，且无粗细/透明度调节。这不是 bug，是规范允许的行为。

• 必须搭配视觉强化：例如 .strikethrough { text-decoration: line-through; opacity: 0.7; color: #d32f2f; }
• 动画需求（如划线渐显）无法靠 text-decoration 实现，得用 ::after 伪元素模拟横线并加 transition
• 动态场景（如 JS 控制完成状态）优先操作 class，而非切换标签，避免反复重绘和语义污染

语义永远比样式优先——划掉一行字，到底是“系统作废”“编辑删除”还是“用户勾选完成”，决定了该用 <s></s>、<del></del> 还是纯 CSS 类。