修改span类颜色为红色失败且文本出现删除线，该如何解决？

解决方案 #

• 排查CSS优先级冲突
  右键点击页面中的「NBA」文本，选择「检查」打开开发者工具元素面板，查看该元素绑定的所有CSS规则：
  1. 找到添加text-decoration: line-through属性的规则来源，确认是自定义样式还是第三方样式引入的冲突
  2. 你写的颜色样式未生效大概率是优先级低于已有规则，可以通过提升选择器优先级解决，示例写法：

/* 假设你给包裹NBA的span添加的类名为nba-text */
.page-content .nba-text {
  color: #ff0000;
  text-decoration: none;
}

3. 可临时添加!important验证规则是否能生效：color: #ff0000 !important;，确认生效后再调整选择器优先级替换!important即可。

• 排查浏览器插件拦截问题
  大部分广告拦截、内容过滤类插件会默认给包含「NBA」这类关键词的元素添加删除线、隐藏等样式，你可以先禁用所有浏览器扩展，刷新页面后查看样式是否正常。如果禁用后问题解决，调整对应插件的过滤规则，将当前站点加入白名单即可。

• 排查DOM结构错误
  确认你包裹「NBA」的span标签没有嵌套异常，没有被其他带删除线样式的元素包裹，也没有拼写错误的类名、属性。

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