<ins>标签默认下划线改不掉是因为浏览器用户代理样式表显式设定了text-decoration: underline，该样式不继承、不穿透，必须直接选中ins元素并用足够优先级的CSS覆盖，如ins { text-decoration: none; }。
ins 标签默认下划线为什么改不掉？
因为 <ins> 是语义化标签，浏览器对其设置了默认样式：text-decoration: underline，且这个样式通常带权重（比如在用户代理样式表中定义）。直接在父容器写 text-decoration: none 不生效——它不会继承覆盖子元素的显式声明，更不会穿透到 <ins> 内部。
常见错误现象：给 <body> 或 <div> 设置 text-decoration: none，但 <ins> 里的文字依然有下划线。
- 必须单独选中
<ins>元素写样式，例如ins { text-decoration: none; } - 如果已有其他 CSS 规则影响（比如全局重置），需检查层叠顺序和 specificity
-
<ins>的下划线颜色默认跟随color，不是固定黑色；若想改色，必须显式设置text-decoration-color
怎么用 CSS 覆盖 ins 的下划线样式？
核心是「显式重写」+「确保作用域正确」。不能依赖继承，也不能只改祖先。
- 基础覆盖：用
ins { text-decoration: underline; }显式声明，才能后续调整样式参数 - 改颜色：加
text-decoration-color: #007bff;（注意 IE 不支持，Edge 79+ 支持） - 改线型：加
text-decoration-style: wavy;或dashed（同样需现代浏览器） - 改粗细/位置：CSS 原生
text-decoration不支持控制粗细和 offset，此时建议放弃原生方案，改用border-bottom模拟
示例（波浪红线下划线）：
立即学习“前端免费学习笔记（深入）”；
ins {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
用 border-bottom 替代 ins 下划线的实操要点
当需要精确控制下划线距离文字的高度、粗细或 hover 效果时，border-bottom 是更可靠的选择，尤其要兼容旧版 Safari 或 Edge。
- 必须清除原生下划线：
text-decoration: none - 设置
display: inline-block或inline+padding-bottom避免文字被压住 -
border-bottom的颜色、宽度、样式可自由设，比如border-bottom: 2px double #28a745; - 注意行高影响：若文本多行，
border-bottom只出现在最后一行底部，而原生text-decoration会每行都画线
示例（绿色双线下划线，距文字 2px）：
ins {
text-decoration: none;
display: inline-block;
padding-bottom: 2px;
border-bottom: 2px double #28a745;
}
ins 和 text-decoration 的语义与可访问性冲突点
很多人只盯着样式，忽略了语义一致性。<ins> 表示「插入内容」，屏幕阅读器会播报“inserted”，而单纯用 text-decoration: underline 没有语义含义。
- 不要为了样式删掉
<ins>标签，改用 CSS 覆盖即可 - 避免对非
<ins>元素滥用text-decoration: underline模拟插入效果——这会让辅助技术完全忽略语义 - 若需同时满足设计需求与合规（如 WCAG），优先保留
<ins>，再用 CSS 微调外观 - 特别注意：某些审计工具（如 axe）会检测
<ins>是否有可见装饰，纯靠背景色或字体加粗可能不达标
真正容易被忽略的是：修改 <ins> 下划线时，别只测 Chrome，务必在 Safari（尤其是 iOS）、Firefox 和 NVDA/JAWS 下验证是否仍被识别为插入内容——样式变了，语义不能丢。
