此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<s>:删除线元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<s>HTML 元素会将文本渲染为带删除线的样式。使用<s> 元素来表示不再相关或不再准确的内容。但是,<s> 并不适合用来表示文档的编辑修改;在这种情况下,应根据需要使用<del> 和<ins> 元素。
In this article
尝试一下
<p><s>今晚票房将有少量门票发售。</s></p><p>已售罄!</p>s { /* 在这里添加你的样式 */}属性
这个元素只包含全局属性。
无障碍
大多数屏幕阅读技术在默认配置下不会播报s 元素的存在。可以通过结合使用 CSS 的content 属性与::before 和::after 伪元素,实现播报功能。
css
s::before,s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}s::before { content: "(开始删除)";}s::after { content: "(结束删除)";}一些使用屏幕阅读器的人会刻意禁用朗读某些内容,以避免产生过多的冗余信息。正因如此,务必要避免滥用这种技术,只应在“不知道内容已被删除会严重影响理解”的情况下才使用。
示例
css
.sold-out { text-decoration: line-through;}html
<s>今日特价:三文鱼</s> 已售罄<br /><span>今日特价:三文鱼</span> 已售罄结果
技术概要
规范
| Specification |
|---|
| HTML> # the-s-element> |
浏览器兼容性
参见
<strike>元素是<s>元素的别名,现已废弃,不应再在网站中使用。- 如果表示数据已被删除,应使用
<del>元素。 - 应使用 CSS
text-decoration-line属性来实现<s>元素之前的视觉效果。