text-decoration旧语法不支持多值叠加，underline与line-through互斥；需用新子属性text-decoration-line等组合实现；移除链接下划线需覆盖所有伪类并注意继承性；颜色/样式/粗细控制须依赖新属性，兼容性受限。
text-decoration 值不能叠加写成 text-decoration: underline line-through
浏览器会直接忽略这种写法，因为 text-decoration 本身是简写属性，但它的历史语法不支持空格分隔多个值（除非用新标准的子属性）。老式写法里，underline、line-through、overline 是互斥的——写两个，后一个会覆盖前一个。比如 text-decoration: underline line-through 实际只生效 line-through。
真正想同时加下划线和删除线，得用 CSS 新规范的子属性：
text-decoration-line: underline line-through; text-decoration-color: currentColor; text-decoration-style: solid;
注意：text-decoration-line 支持空格分隔多个值，underline line-through 才是合法组合；而旧式单属性写法不认这个。
为什么给 <a> 加 text-decoration: none 有时没效果
常见原因是选择器权重不够，或者样式被更具体的规则覆盖（比如浏览器默认样式表或框架自带的 a:hover 规则）。另外，text-decoration 默认不继承，所以即使父元素设了 none，子 <a> 仍可能显示下划线。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是直接命中目标元素并提高优先级：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 用
a { text-decoration: none !important; }（仅调试时临时用） - 更推荐：加 class 控制，如
<a class="no-underline">链接</a>，再写.no-underline { text-decoration: none; } - 如果要移除所有状态下的下划线，记得补全伪类：
a, a:link, a:visited, a:hover, a:active { text-decoration: none; }
text-decoration 的颜色和粗细没法直接用旧属性控制
老式 text-decoration: underline 完全依赖 color 值决定线色，也没法调线型或厚度。你想让下划线是红色虚线、2px 粗？旧写法做不到。
必须升级到子属性组合：
text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;
注意兼容性：text-decoration-thickness 和 text-decoration-style: wavy 在 Safari 15.4+、Chrome 95+ 才稳定支持；Firefox 对 wavy 支持较晚。如果要兼容 IE 或老安卓 WebView，只能放弃这些效果，用 border-bottom 模拟。
局部下划线别乱套在父容器上
比如你只想给“Save”加下划线，但把 text-decoration: underline 写在包裹 Save (2) 的 <div> 上，结果整个字符串都被划线——这是 text-decoration 的作用机制决定的：它按行盒（inline formatting context）渲染，不是按字符。
正确解法只有两种：
- 把要修饰的部分单独包一层内联元素，比如
<span class="underline-me">Save</span> (2)，再对.underline-me设样式 - 用
background-image: linear-gradient()+background-position手动模拟下划线，完全可控但写法略长
别指望 text-decoration-skip-ink 或 text-underline-offset 能解决范围问题——它们只调位置和避让，不改变作用范围。
