text-decoration: line-through 是实现标准删除线的唯一正确 CSS 属性，直接作用于行内元素，语义清晰且原生支持；错误写法如 strike 或 overline 均不生效，且需避免在块级元素上滥用。
用 text-decoration: line-through 实现标准删除线
浏览器原生支持的删除线就是靠这个 CSS 属性，不是伪元素、不是背景图，也不依赖额外标签。它直接作用于文字本身，语义清晰，屏幕阅读器也能识别为“已作废”内容。
常见错误是写成 text-decoration: strike 或 text-decoration: overline —— 这两个都不生效。line-through 是唯一正确值。
- 适用于任意行内元素：
span、em、strong，甚至a标签内文字 - 不推荐直接写在
div上——块级元素会把整行都划掉，容易误伤布局 - 如果需要局部删除（比如只删一个词），必须包裹在
span里，不能靠父容器样式“猜”范围
为什么不用 <s> 或 <del> 标签？
<s> 和 <del> 都会默认触发 line-through，但语义不同：<del> 表示内容被移除（适合版本对比、编辑记录），<s> 表示内容不再准确或已作废（更贴合“已作废信息”场景）。
不过要注意：很多 CMS 或富文本编辑器会把用户点的“删除线”按钮硬编码成 <s>，而某些旧版 IE 对 <s> 支持不稳定；<del> 兼容性更好，且可加 datetime 属性记录作废时间。
- 纯展示场景（如文档归档页）优先用
<s> - 需留痕或对接后端审计日志时，用
<del datetime="2024-06-15"> - 避免混用：同一项目里不要
<s>和<del>随意切换，CSS 重置容易漏
删除线和字体颜色/透明度一起用时的坑
删除线颜色默认跟随文字色，但如果你改了 color 或用了 opacity，删除线会同步变淡——这在低透明度下可能导致删除线几乎看不见。
解决方法只有显式设置 text-decoration-color，但它不兼容 IE 和旧版 Safari。所以更稳妥的做法是：
- 避免对带删除线的文字设
opacity < 1，改用rgba()控制文字色透明度 - 需要强调作废状态时，别只靠删除线——加个浅灰背景
background-color: #f5f5f5或小图标::after { content: "（已作废）" } - 如果必须兼容 IE，老老实实用
border-bottom: 1px solid #999模拟，再配合padding-bottom: 1px防止文字上移
React/Vue 里动态控制删除线的写法差异
框架里最常踩的坑是把删除线逻辑写进 class 名里，结果状态更新后样式没刷新——其实根本不需要 JS 控制样式，CSS 类只需声明规则，状态交给类名开关即可。
例如 Vue 模板中：<span :class="{ 'is-deprecated': item.isDeprecated }">{{ item.text }}</span>，对应 CSS 写 .is-deprecated { text-decoration: line-through; }。
React 同理，但注意：不要在 style 里内联写 textDecoration，除非你确定每次渲染都重新计算。内联样式优先级高，容易覆盖全局删除线主题。
- Next.js / SSR 项目中，确保删除线类名不在
dynamicCSS 块里被剔除（检查构建后是否还存在） - 如果用 Tailwind，别用
line-through工具类直接套在动态元素上——它可能被 PurgeCSS 误删，建议提取成自定义 class - 小程序环境（如微信）不支持
text-decoration-color，且text-decoration对rich-text组件支持有限，优先用span+ 自定义 class
