文字颜色改不了主因是CSS优先级不足或继承覆盖，需用开发者工具检查Computed值、排查!important和选择器权重，确认元素命中、scoped样式穿透、重置样式干扰及滤镜/透明度等间接影响。

文字颜色改不了，大概率是 CSS 优先级或继承关系导致 color 属性被更高权重的样式覆盖了，不是属性写错了，而是没“压得过”别人。

检查是否被父元素或组件样式强制继承

很多 UI 框架（如 Ant Design、Element Plus）或自定义组件会通过 color: inherit 或直接设置子元素颜色，让文字“自动跟随”父级。这时即使你在子元素上写了 color: red，也可能因优先级不够或被 !important 覆盖而失效。

• 打开浏览器开发者工具（F12），选中文字元素，看右侧 Computed 面板里 color 的最终值和来源
• 在 Styles 面板中逐条排查：哪条规则带 !important？哪个选择器更具体（比如 .header .title a 比 a 权重高）？
• 尝试临时加 color: red !important 测试是否生效——若生效，说明就是优先级问题

确认选择器能否准确命中目标元素

看似写了 color，但可能根本没选中目标文字。常见情况包括：

• 用了类名但 HTML 中没加对应 class，或拼写错误（如 text-red 写成 text-reds）
• 文字在 、 等内联元素里，而你只给外层
  设置了 color，但未设置 color: inherit 或未穿透设置
• 使用了 CSS-in-JS 或 scoped style（如 Vue 单文件组件），样式被自动添加属性选择器隔离，需用 ::v-deep 或 /deep/（Vue 2）或 :deep()（Vue 3）穿透

避免被全局重置或基础样式干扰

某些 CSS 重置库（如 normalize.css、modern-normalize）或框架基础样式会对 a、button、input 等元素单独设色，且带较高优先级。

• 例如：a { color: #007bff; } 会覆盖你对链接内文字的普通 color 设置
• 解决方法：提高选择器特异性，如用 .my-link a { color: #f00; }，或直接针对该元素类型加权：a.my-text { color: #f00; }
• 检查是否意外启用了系统配色模式（如 prefers-color-scheme）并设置了暗色主题下的 color 覆盖

确保没有被其他属性间接影响

极少数情况下，color 看似无效，其实是被其他声明“掩盖”了：

• opacity: 0 或 visibility: hidden 让文字不可见，误以为颜色没变
• 文字在伪元素（::before/::after）中生成，而你只给主元素设了 color —— 伪元素需单独设置 color
• 使用了 filter: grayscale(1) 或 filter: contrast(0) 等滤镜，导致颜色视觉失真