为何HTML <ins>元素内的text-decoration: none属性不生效？

这个问题我之前也碰到过！核心原因是：<ins>标签默认自带text-decoration: underline样式，而且文本装饰（text-decoration）的渲染逻辑比较特殊——父元素的下划线会延伸覆盖到子元素上，不是通过普通的继承传递。所以你只给<a>标签设置text-decoration: none，只能移除a标签自身的下划线，却挡不住父元素<ins>的下划线延伸过来。

下面给你两种可行的解决方案：

方案一：直接移除<ins>标签的下划线 #

如果不需要<ins>本身的下划线效果，直接给它也设置text-decoration: none就行：

.no-decoration,
.no-decoration-ins {
  text-decoration: none;
}

对应的HTML修改：

<h1>ins tag</h1>
<ins class="no-decoration-ins">
  <a class="no-decoration" href="">Some link</a>
</ins>
<h1>no ins tag</h1>
<div>
  <a class="no-decoration" href="">Some link</a>
</div>

方案二：切断父元素下划线的延伸（保留<ins>的下划线） #

如果你还想保留<ins>标签其他文本的下划线，只是让内部的链接去掉，可以给<a>标签设置display: inline-block，这样能切断父元素下划线的延伸：

.no-decoration {
  text-decoration: none;
  display: inline-block;
}

原HTML不需要改动，就能让<ins>内的链接去掉下划线，同时<ins>的其他文本（如果有的话）依然保留下划线效果。

另外，你之前尝试的!important没用，是因为它只能提升当前元素样式的优先级，但父元素的下划线不是继承给子元素的，而是直接覆盖渲染，所以优先级再高也没用~

内容的提问来源于stack exchange，提问作者Yang Wei