文字颜色未生效的主因是样式被覆盖，需选对元素并提升优先级：检查目标标签是否正确、优先级是否足够、继承与浏览器接管机制（如-webkit-text-fill-color）是否干扰，再验证加载与颜色值兼容性。
文字颜色设了却没变，不是color写错了，而是它被别的样式盖住了。核心就两点：选对元素、压过优先级。
确认color属性是否真的作用在目标元素上
很多情况是“以为改了文字，其实改的是父容器”。比如给li加color，但里面文字实际由a标签承载，而a自己有默认或继承的颜色，就会覆盖li的设置。正确做法是直接针对文字所在标签写样式：
- 链接文字颜色，必须用a:hover { color: #fff; }，而不是li:hover { color: #fff; }
- 表格中想改某列文字颜色，优先给td或th单独设color，别只改table
- 禁用状态的select文字不生效？试试加上-webkit-text-fill-color，它专管被浏览器接管的只读文本渲染
检查CSS选择器优先级是否足够高
即使选对了元素，也可能被更高优先级的规则覆盖。CSS优先级顺序是：ID选择器 > 类选择器 > 元素选择器。例如：
- 如果框架或组件库用了#nav a { color: #666; }，你写a { color: red; }就无效
- 解决方法：升级选择器，比如加类.my-link a { color: red; }，或用ID（慎用）
- 临时调试可用!important验证是否是优先级问题，但上线前应改用更合理的选择器结构
留意继承与强制样式干扰
color具有继承性，父元素设了颜色，子元素没显式声明就会照搬。但也可能被其他机制打断：
立即学习“前端免费学习笔记（深入）”；
- 某些UI库（如Element Plus）对禁用控件做了内联样式或伪元素处理，单纯改color无效，需配合-webkit-text-fill-color或::placeholder等专用属性
- 检查浏览器开发者工具的“Computed”面板，看color值是否显示为灰色（被覆盖）、划掉（被重置）或未列出（根本没匹配）
- 确认CSS文件是否成功加载——网络面板里有没有404，或者样式被注释/条件编译漏掉了
验证颜色值写法与兼容性
颜色本身写错也会“看似没变”，尤其在跨浏览器场景：
- 避免只用英文名（如color: black;），推荐十六进制（#000）或RGB（rgb(0,0,0)）确保一致
- RGBA带透明度时，背景色会影响最终观感，可先用纯色测试是否生效
- 深色模式下部分系统颜色会自动适配，若需强制固定，加color-scheme: none;（支持现代浏览器）
