集成CKEditor修订插件时，如何用JS取消子span继承的line-through？

嘿，我太懂你这个痛点了！当ice-ins（绿色插入文本）嵌套在ice-del（带删除线的红色文本）里时，哪怕给子元素硬塞style.textDecoration = "none"，那条烦人的删除线还是赖着不走，绿色文本配删除线看着特别别扭。这事儿本质是text-decoration这个CSS属性的继承逻辑有点特殊，再加上CKEditor自带的样式优先级可能压过了你写的内联样式。

给你整理了几个亲测有效的解决方案：

方案1：用CSS强制覆盖（最省心） #

text-decoration虽然是继承属性，但咱们可以用更具体的选择器把它压下去。直接加这段CSS就行：

.ice-del .ice-ins {
  text-decoration: none !important;
  color: green; /* 保险起见，再确认下插入文本的颜色 */
}

用!important是为了干过CKEditor自带的样式，如果不想用!important，就把选择器写得更具体点，比如加上你的编辑器容器类：

#editor-container .ice-del .ice-ins {
  text-decoration: none;
  color: green;
}

（把#editor-container换成你实际的编辑器容器ID或类名）

方案2：动态调整DOM结构（优化你试过的方法） #

要是不想靠CSS，继续用JS操作DOM的话，可以把嵌套的ice-ins从ice-del里拎出来，放到父元素外面，这样从结构上就断了继承关系。代码大概是这样：

// 找出所有嵌套在ice-del里的ice-ins元素
document.querySelectorAll('.ice-del .ice-ins').forEach(insEl => {
  const delEl = insEl.parentElement;
  // 把ins元素插到del元素的后面
  delEl.insertAdjacentElement('afterend', insEl);
  // 如果原来的del元素现在空了，直接删掉就行（看你业务需求）
  if (!delEl.textContent.trim()) {
    delEl.remove();
  }
});

这个方法能彻底避免样式继承的问题，还不丢修订记录的语义。

方案3：用text-decoration-skip-ink辅助优化 #

要是上面的方法还有小问题，试试text-decoration-skip-ink这个属性，它能让装饰线跳过指定元素：

.ice-del {
  text-decoration-skip-ink: none; /* 关掉默认的自动跳过，确保我们的样式生效 */
}
.ice-del .ice-ins {
  text-decoration: none;
}

不过这个更多是辅助优化，主要解决装饰线穿过字母的情况，优先用前两个方案更稳妥。

为啥直接设style.textDecoration = "none"没用？ #

大概率是CKEditor自带的Track Changes样式优先级更高，比如它给.ice-del加了!important的删除线样式，你的内联样式干不过它；还有个别旧浏览器对text-decoration的继承渲染有点奇怪，子元素的none会被父元素的line-through覆盖。所以用CSS强制覆盖是最直接的办法。

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