text-decoration-color无效主因是未启用装饰线，需配合text-decoration-line或简写属性使用，推荐text-decoration: underline solid color;并注意浏览器兼容性及样式覆盖问题。
在使用 CSS 的 text-decoration-color 设置文字装饰颜色时，如果发现样式无效，可能是由于语法错误、浏览器兼容性或未正确启用相关属性导致的。这个属性用于设置下划线（underline）、上划线（overline）或删除线（line-through）的颜色，但它必须配合 text-decoration-line 一起使用，否则可能不会生效。
检查是否启用了装饰线
text-decoration-color 只负责颜色，不控制是否显示线条。必须先启用对应的装饰线：- 确保设置了 text-decoration-line: underline 或其他线型
- 也可以简写在 text-decoration 复合属性中
例如：
.example {
text-decoration-line: underline;
text-decoration-color: red;
}
/* 或者更简洁的写法 */
.example {
text-decoration: underline;
text-decoration-color: red;
}
使用现代写法：text-decoration 简写
CSS Text Decoration Level 3 支持将类型、颜色、样式写在一起，推荐使用简写形式避免遗漏：.highlight {
text-decoration: underline solid #00bcd4;
}
其中 #00bcd4 就是装饰线的颜色。这种写法更可靠，也更容易维护。
注意浏览器兼容性
虽然主流现代浏览器都支持 text-decoration-color，但部分旧版本可能不识别：- IE 全系列不支持
- 需要 Chrome 57+、Firefox 36+、Safari 12.1+
如果需要兼容老浏览器，可考虑用 border-bottom 模拟下划线：
立即学习“前端免费学习笔记（深入）”；
.fallback {
color: #000;
border-bottom: 1px solid red;
text-decoration: none;
}
确保没有被其他样式覆盖
检查开发者工具中的计算样式，确认 text-decoration-color 是否被后续规则覆盖。特别是：- 是否有更具体的 CSS 规则重置了装饰
- 是否父元素设置了 inherit 但值为默认黑色
- 伪类（如 :hover）是否影响了最终效果
基本上就这些。只要确保装饰线已开启、语法正确、浏览器支持，并排除样式覆盖，text-decoration-color 就能正常工作。不复杂但容易忽略细节。
