颜色未变主因是被更高优先级样式覆盖或未命中目标元素，应通过DevTools查看color是否被划掉、检查Computed值及来源，排查!important、内联样式、选择器权重、继承链断裂、scoped样式穿透及颜色值合法性等问题。
颜色设了但没变，90%不是写错了，而是被别的规则压住了，或者根本没作用到目标元素上。
color 被更高优先级的样式覆盖
浏览器不会“记住你写了什么”，只执行最终胜出的那条规则。哪怕你写了 color: #f00，只要有一条权重更高的规则（比如带 !important、ID 选择器、内联样式）存在，它就会失效。
- 打开 DevTools → Elements → 选中文字元素 → 看 Styles 面板里
color是否被划掉（strikethrough） - 点 Computed 标签，搜
color，直接看最终值和来源文件+行号 - 临时加
color: red !important测试：若生效，说明就是优先级问题 - 常见翻车点：
button { color: gray }覆盖了你的.btn { color: red }，因为标签选择器权重太低；a元素默认有浏览器 UA 样式，常带!important或高权重类
选错了目标元素或继承链断裂
你以为改的是文字，其实改的是它的父容器；或者父容器设了 color: transparent 或 color: currentcolor 但没定义基础色，子元素继承后就“看不见”了。
- 链接文字必须写
a:hover { color: #fff }，而不是li:hover { color: #fff }—— 文字在a里，li的color不会穿透过去 - 禁用状态的
input或select，浏览器会接管文本渲染，此时需额外加-webkit-text-fill-color - 某些 UI 框架（如 Element Plus）对
disabled控件用了伪元素或内联样式，单纯改color无效 - 检查是否用了 scoped style（Vue）或 CSS-in-JS，样式被属性选择器隔离，需用
:deep()或::v-deep穿透
颜色值本身不合法或被视觉干扰掩盖
颜色写得再对，如果值无效、被透明度稀释、或被其他属性“吃掉”，也看不出变化。
立即学习“前端免费学习笔记（深入）”；
-
#f、#ff、rgb(255, 0, 0, 0.5)都是非法写法 —— 前者缺位，后者 RGBA 必须用rgba() -
opacity: 0.9或filter: contrast(0)会让颜色变淡或失真，误以为没生效 -
visibility: hidden或display: none下，color依然计算，但你看不见 - 伪元素（如
::before）里的文字，要单独给伪元素设color，主元素的设置不继承 - macOS 上 San Francisco 字体在浅背景对浅灰文字做自动对比增强，肉眼判断易误判
::selection 或 text-decoration-color 不生效
这两类颜色控制有特殊限制，不能套用普通 color 的逻辑。
-
::selection只支持color和background-color等极少数属性；写text-shadow或opacity会导致整条规则被浏览器静默丢弃 - 必须加前缀兼容旧版 Safari：
*::selection+*::-webkit-selection；且父元素不能设user-select: none -
text-decoration-color不是独立生效的——必须配合text-decoration-line: underline，或用简写text-decoration: underline solid #00bcd4 -
::selection中禁用rgba()、hsla()和带 alpha 的十六进制（如#ff643280），只认纯色
真正卡住的地方往往不是语法，而是你没确认那条 color 到底有没有算进最终样式里。Computed 面板里的值，才是唯一可信的答案。
