<del>: 已删除文本元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<del> HTML 元素表示文档中已删除的文本范围。例如,这可用于渲染“更改跟踪”或源代码差异信息。 <ins> 元素可用于相反的目的:指示已添加到文档中的文本。

试一试

<blockquote>
  There is <del>nothing</del> <ins>no code</ins> either good or bad, but
  <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
del {
  text-decoration: line-through;
  background-color: #ffbbbb;
  color: #555555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #d7d7db;
  font-size: 1rem;
}

此元素通常(但不必须)通过对文本应用删除线样式来呈现。

属性

此元素的属性包括全局属性

cite

一个解释更改的资源的 URI(例如,会议记录)。

datetime

此属性指示更改的时间和日期,必须是有效的日期字符串,可选择包含时间。如果该值无法解析为带有可选时间的日期字符串,则该元素没有关联的时间戳。有关不带时间的字符串的格式,请参阅 日期字符串。包含日期和时间的字符串格式在 本地日期和时间字符串 中介绍。

无障碍

在大多数屏幕阅读器技术的默认配置中,del 元素的存在不会被播报。可以通过使用 CSS content 属性,以及 ::before::after 伪元素使其被播报。

css
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

一些使用屏幕阅读器的用户会故意禁用播报会产生额外冗余的内容。因此,重要的是不要滥用此技术,只在不了解内容已被删除会不利于理解的情况下应用它。

示例

html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>

结果

技术摘要

内容类别 措辞内容流内容
允许内容 透明.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受短语内容的元素。
隐式 ARIA 角色 删除
允许的 ARIA 角色 任意
DOM 接口 HTMLModElement

规范

规范
HTML
# the-del-element

浏览器兼容性

另见

  • <ins> 元素用于文本中的插入内容
  • <s> 元素用于删除线,与表示文本删除分开