<s> HTML 元素会将文本渲染为带删除线的样式。使用 <s> 元素来表示不再相关或不再准确的内容。但是,<s> 并不适合用来表示文档的编辑修改;在这种情况下,应根据需要使用 {{HTMLElement("del")}} 和 {{HTMLElement("ins")}} 元素。
{{InteractiveExample("HTML 示例:<s>", "tabbed-shorter")}}
```html interactive-example
今晚票房将有少量门票发售。
已售罄!
```css interactive-example
s {
/* 在这里添加你的样式 */
}
属性
这个元素只包含全局属性。
无障碍
大多数屏幕阅读技术在默认配置下不会播报 s 元素的存在。可以通过结合使用 CSS 的 {{cssxref("content")}} 属性与 {{cssxref("::before")}} 和 {{cssxref("::after")}} 伪元素,实现播报功能。
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: "(结束删除)";
}
一些使用屏幕阅读器的人会刻意禁用朗读某些内容,以避免产生过多的冗余信息。正因如此,务必要避免滥用这种技术,只应在“不知道内容已被删除会严重影响理解”的情况下才使用。
示例
.sold-out {
text-decoration: line-through;
}
<s>今日特价:三文鱼</s> 已售罄<br />
<span class="sold-out">今日特价:三文鱼</span> 已售罄
结果
{{EmbedLiveSample("示例")}}
技术概要
| 内容分类 | 短语内容、流式内容。 |
|---|---|
| 允许的内容 | 短语内容。 |
| 标签省略 | 不允许,开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 隐含的 ARIA 角色 |
deletion
|
| 允许的 ARIA 角色 | 任何 |
| DOM 接口 | HTMLElement |