text-decoration用法核心是语义优先：underline和line-through需配合css精确控制，禁用和作样式开关；须用空格分隔多值、显式清除继承、兼顾可访问性与兼容性。
text-decoration 用法和常见误区
HTML 里没有独立的「下划线」或「删除线」标签，得靠 text-decoration CSS 属性控制。很多人直接写 <u></u> 或 <s></s>，但这些是语义化标签，不是样式开关——用错场景反而影响可访问性。
-
<u></u>在 HTML5 中已不推荐用于纯样式，仅适合标注拼写错误、专有名词等有明确语义的场景 -
<s></s>和<del></del>都表示删除，但<del></del>支持datetime属性记录删除时间，更适合内容修订 - 想单纯加样式，优先用
span+style="text-decoration: underline;"或 class
如何用 CSS 同时加下划线和删除线
一个元素要同时显示下划线和删除线（比如对比原价/现价），不能写 text-decoration: underline line-through —— 这样只生效最后一个值。必须用空格分隔，且顺序无关：
span.sale {
text-decoration: underline line-through;
}
注意：如果父元素设置了 text-decoration，子元素默认会继承并叠加，可能意外出现多条线。用 text-decoration: none 显式清除再重设更安全。
line-height 对下划线位置的影响
下划线离文字底部的距离由 line-height 和字体本身决定，不是固定像素。改 font-size 或 line-height 后，下划线位置会偏移，尤其在按钮或小字号场景里容易贴底或悬空。
- 用
text-underline-offset可微调距离（Chrome 89+、Firefox 79+ 支持）：text-underline-offset: 2px - 旧浏览器不支持 offset 时，可用
border-bottom模拟下划线，完全可控：border-bottom: 1px solid currentColor - 删除线同理，
text-decoration-thickness能调粗细，但兼容性更差（仅较新 Chrome/Edge）
链接默认下划线怎么去掉又不影响可访问性
很多人一上来就写 a { text-decoration: none; }，结果屏幕阅读器用户失去视觉线索，键盘焦点也难识别。正确做法是保留默认下划线，只在特定状态移除：
- 鼠标悬停时加下划线（本来就有，不用动）
- 聚焦态必须保留：
a:focus { text-decoration: underline; }（避免被覆盖） - 如真要移除，至少补上其他视觉提示：
a:hover { background-color: #f0f0f0; }或border-bottom - 禁用链接？用
aria-disabled="true"+pointer-events: none，别只靠去下划线
下划线和删除线看着简单，但涉及语义、兼容性和无障碍，改之前先想清楚它代表什么，而不是“看起来像就行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
