标签专用于标记曾准确但现已失效的内容，如过期价格、停用功能名、废止条款；不支持cite/datetime属性，不可与嵌套混用，且需配合css增强可访问性。
用 <s></s> 表示“内容曾有效但现已失效”
<s></s> 不是快捷删除线工具，它专用于标记那些**过去准确、现在已过时或不再适用**的内容。比如商品原价、停用的功能名、已废止的条款编号——这些信息没被“删掉”，只是状态变了。
常见错误现象：<s>¥199</s>¥99 在电商页里看似合理，但屏幕阅读器可能读作“已废弃：¥199”，用户会疑惑“这价格还能点吗？还能买吗？”。如果后台其实只是临时缺货，并非价格作废，语义就错位了。
使用场景包括：
- 价格调整前的标价（配合紧跟其后的现价，保证读屏顺序自然）
- 已下线功能的旧名称（如
<s>旧版导出按钮</s>） - 法律文档中被修订但需保留对照的条目
<s></s> 不支持 cite 或 datetime 属性，强行添加会被 HTML 校验器警告；它也不表示“编辑动作”，所以别在 Git diff 或协作批注里用它替代 <del></del>。
<del></del> 和 <s></s> 混用会破坏语义逻辑
嵌套写成 <del><s>xxx</s></del> 是典型错误。两者语义冲突：<del></del> 说“这内容已被移除”，<s></s> 却说“这内容还在，只是不准了”。读屏软件可能重复播报，搜索引擎可能无法正确归类变更意图。
实操建议：
- 同一段文本只选一个：要强调“删除动作”用
<del></del>，强调“状态失效”用<s></s> - 表格整行失效？不能包
<tr>，得在每个 <code><td> 里分别用 <code><s></s>或<del></del>包裹内容 - React/Vue 中动态控制删除状态？优先用 CSS 类（如
.strikethrough），避免频繁切换标签导致 DOM 重排或辅助技术状态混乱 - 至少覆盖颜色和粗细：
s { text-decoration: line-through; text-decoration-color: #d32f2f; text-decoration-thickness: 2px; } - 兼容老浏览器（如 IE11）时，回退写法：
text-decoration: line-through #d32f2f;（颜色生效，粗细忽略） - 别只改
color，高对比度模式下硬设颜色反而让删除线消失；搭配opacity或filter: grayscale(50%)更稳妥 - 需要划线动画？
text-decoration不支持 transition，得用伪元素模拟 - JS 控制的临时状态（如表单校验失败时划掉某字段）——用 class 切换更轻量、无语义污染
- 服务端返回的是布尔字段（
isDeprecated: true），前端渲染时若直接映射为<s></s>，可能把“技术性废弃”误译为“业务性失效” - 多语言环境里，“已失效”的表述在不同语种中语义权重不同，CSS 方案更容易做本地化适配
<s></s> 的样式弱，默认线细且浅灰，必须配 CSS
浏览器对 <s></s> 的默认 text-decoration: line-through 渲染非常淡，小字号或深色背景上几乎不可见。光靠标签本身达不到可用效果。
实操建议：
什么时候该放弃 <s></s>，直接用 CSS
当删除线只反映用户操作反馈（比如待办列表中点击“完成”后划掉一项），而非内容本身的语义变化时，<s></s> 就不适用。它不是“视觉开关”，而是“语义声明”。
容易被忽略的点：
真正卡住人的从来不是怎么画那条线，而是想清楚：这条线，到底是在说“它没了”，还是“它错了”，还是“你点过了”。选错标签，后期重构成本远高于重写几行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
