最常见原因是被更高优先级的选择器覆盖；需用开发者工具检查color是否被划掉，确认内联样式、!important、伪类状态及选择器权重（内联>ID>类>标签），并排查颜色值语法、CSS变量回退及opacity等视觉干扰因素。
color 属性写对了但文字还是黑色
最常见原因是被更高优先级的选择器覆盖。CSS 的 color 是可继承属性，一旦父元素设了 color: black，子元素没显式声明就会沿用——哪怕你写了 color: red，也可能因为选择器权重不够而被忽略。
检查方式：打开浏览器开发者工具（F12），选中文字元素，在 Styles 面板里看 color 是否被划掉（strikethrough）。如果被划掉，说明有别的规则赢了它。
- 注意是否用了内联样式（
style="color: blue"），它的优先级高于所有外部或内部样式表中的规则 - 检查是否在父容器上用了
!important，它会直接压制子元素普通声明 - 确认是否误用了伪类（如
a:visited）却没覆盖到当前状态
选择器权重算错导致 color 被忽略
CSS 优先级不是“谁在后面谁赢”，而是按四元组计算：内联样式 > ID > 类/属性/伪类 > 标签/伪元素。比如 #nav .title（1,1,1,0）比 div h2（0,0,0,2）高得多，哪怕后者写在后面。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
-
.btn { color: red }被button { color: gray }覆盖？因为标签选择器权重太低，加个类更稳 -
ul li a和.menu-link看似差不多，但前者是三个标签（0,0,0,3），后者是一个类（0,0,1,0），后者胜出 - 用
:not()包裹时，括号内选择器也参与计权，div:not(.active) span权重是 0,0,1,2
color 生效但看不出变化
颜色值本身可能有问题：十六进制缩写写成 #fff 没问题，但写成 #ff 或 #f 就无效；RGB 写成 rgb(255, 0, 0, 0.5) 会报错（RGBA 第四个参数需用 rgba()）；HSL 中 hsl(0, 100%, 50%) 正确，但漏掉百分号（hsl(0, 100, 50)）就回退为默认色。
另外注意：
- 某些系统字体（如 macOS 的 San Francisco）在浅色背景下对浅灰文字做自动对比度增强，肉眼看起来像没变色
- 如果元素有
opacity: 0.9，且父容器已设颜色，子元素color可能被视觉弱化，实际生效但难察觉 - 使用 CSS 变量时，
color: var(--text-primary, #333)若变量未定义，会回退到#333，别误以为没生效
调试 color 优先级的实操建议
别靠猜，用浏览器 DevTools 快速定位：
- 右键元素 → “检查”，在 Styles 面板里找
color，看哪条规则生效、哪条被划掉 - 点击右侧的“Computed”标签，搜
color，能看到最终计算值和来源文件+行号 - 临时加
!important测试是否是优先级问题（仅调试用，上线前删掉） - 用
[data-debug]这类高权重属性选择器快速验证：比如[data-debug] { color: hotpink !important; }，然后给元素加data-debug属性
真正麻烦的往往不是写错语法，而是嵌套深、框架样式干扰多、或者用了 Shadow DOM 隔离——这时候得看具体上下文，不能只盯 color 本身。
