XML+XSLT转HTML后按钮background-color样式不生效问题求助

问题原因及解决方案 #

核心原因 #

你当前的写法存在两个典型错误：

1. 你给外层容器#displayCompare2添加.ins、.del类，但htmldiff库处理后生成的差异内容，会自动把新增内容包裹在<ins>原生标签、删除内容包裹在<del>原生标签中，你的类样式作用在外层容器，无法生效到内部的差异标签上
2. 你先给容器加类，紧接着就用innerHTML覆盖了容器内容，即使类对容器生效，容器内的子元素如果存在默认背景/透明背景，也会遮挡父容器的背景色

修复步骤 #

1. 调整样式规则，直接作用于差异标签
   把你的样式替换为以下内容，优先级足够的情况不需要加!important：

/* 匹配htmldiff生成的新增内容标签 */
ins {
  text-decoration: none;
  background-color: #d4fcbc;
}
/* 匹配htmldiff生成的删除内容标签 */
del {
  text-decoration: line-through;          
  background-color: #fbb6c2;
}

如果还是被其他样式覆盖，可以提升选择器优先级：

#displayCompare2 ins {
  text-decoration: none;
  background-color: #d4fcbc;
}
#displayCompare2 del {
  text-decoration: line-through;          
  background-color: #fbb6c2;
}

2. 删除无效的addClass代码
   移除JS中$('#displayCompare2').addClass('ins','del');这一行，这个操作对你的需求没有作用。
3. 验证排查
   打开浏览器开发者工具（F12），选中#displayCompare2下的ins/del元素，查看「样式」面板，确认background-color属性没有被其他更高优先级的样式划掉即可。

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