PHP小码农

Appearance

s 删除线 ​

<s> 标签表示内容不再准确或不再相关。浏览器默认以删除线渲染 <s> 中的文本。它与 <del> 的区别在于：<s> 只标记内容过时，不涉及编辑/替换的含义。

前置知识

阅读本节前，建议先了解：del 与 ins

基础概念 ​

<s>（strikethrough）在 HTML5 中被重新定义了语义：表示内容不再准确或不再相关。常见场景包括：商品原价（已被折扣价替代）、已过期的促销信息、已售罄的商品等。

注意：<s> 不是用来表示"删除的文字"的，那应该使用 <del>。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>s 删除线示例</title>
</head>
<body>
  <!-- 商品原价 -->
  <p>现价：&yen;199 <s>&yen;299</s></p>

  <!-- 已过期的促销 -->
  <p><s>限时优惠：满 100 减 20</s> 活动已结束</p>

  <!-- 不再相关的信息 -->
  <p>库存状态：<s>缺货</s> 已补货</p>
</body>
</html>

详细说明 ​

s 与 del 的区别 ​

标签语义替代内容典型场景
<s>内容不再准确/不再相关通常有但不在同一行原价标签、过期促销
<del>内容已被删除常与 <ins> 配对文档修订、合同修改
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>s 与 del 的区别</title>
</head>
<body>
  <!-- s：只标记旧价格已不再准确 -->
  <p>促销价：&yen;199 <s>&yen;399</s></p>

  <!-- del + ins：展示从旧到新的编辑过程 -->
  <p>会议时间：<del>周三下午 2 点</del><ins>周四上午 10 点</ins></p>
</body>
</html>

s 的默认样式 ​

属性默认值（Chrome）
displayinline
text-decorationline-through

自定义 s 样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 s 样式</title>
  <style>
    s {
      color: #bbb;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <p>现价：&yen;99 <s>&yen;199</s></p>
</body>
</html>

实战示例 ​

电商商品价格展示 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>商品价格</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .price-current { font-size: 1.5rem; color: #e53935; font-weight: bold; }
    .price-original { font-size: 0.875rem; color: #bbb; text-decoration: line-through; }
    .discount { display: inline-block; background: #e53935; color: white; padding: 2px 6px; border-radius: 2px; font-size: 0.75rem; }
  </style>
</head>
<body>
  <h1>无线蓝牙耳机</h1>
  <p>
    <span class="price-current">&yen;199</span>
    <s class="price-original">&yen;399</s>
    <span class="discount">5 折</span>
  </p>
</body>
</html>

注意事项 ​

  • 不要用 <s> 表示文档编辑中被删除的内容，应使用 <del>
  • 不要用 <strike> 标签（已废弃），应使用 <s>
  • 如果只是为了视觉效果而不涉及"不再准确"的语义，应使用 CSS text-decoration: line-through

最佳实践 ​

  1. 标记不再准确的内容：原价、过期信息等
  2. 自定义样式：通过 CSS 调整颜色和删除线样式
  3. 配合新信息：<s> 通常紧跟着新的准确信息

下一节

继续学习：sub 与 sup

参考链接 ​