十六进制颜色写错一位即整条声明静默忽略；浏览器仅接受3位（#rgb）或6位（#rrggbb）合法格式，字母限a–f，位数错误（如#1234）、非法字符（如#ff00gg）、引号包裹或空格均导致失效且无报错。
十六进制颜色写错一位，浏览器就当它不存在——不是报错，而是整条声明静默忽略。你看到的“没生效”，大概率就是#ff00gg、#1234这类非法值在作祟。
怎么快速定位非法十六进制颜色？
开发者工具里不会报错，但会给你明确信号：
-
#ff00gg、#abcde、#12这类值在 Elements → Styles 面板中会显示为带删除线（strike-through）的灰色文本 - 右侧 Computed 标签页里根本找不到
color或background-color对应的计算值 - 临时替换成
red或#000能立刻生效，说明问题出在颜色值本身，而非选择器或层叠
哪些写法绝对无效？
浏览器只接受严格合规的格式，任何偏差都会被丢弃：
- 位数错误：
#1234（4位）、#12345（5位）、#12（2位）全都不合法，不会 fallback 到#123或#123456 - 非法字符：
#ff00gg中的g、#zzzzzz中的z、#123abc!中的!—— 十六进制字母仅限a–f（大小写不敏感） - 引号包裹：
color: "#ff6b35";是字符串字面量，CSS 不解析，等价于没写 - 空格或换行：
color: #ff 6b 35;或跨行写法，会被解析器直接截断
React/Vue 等框架里特别容易踩的坑
JSX 或模板语法中，引号和属性语义混淆是高频雷区：
-
style={{ background: "#fff" }}错：双引号让值变成字符串，React 不会传给 CSS 解析器；应写成background: "#fff"（无外层引号） -
background="#fff"在 HTML 属性中是合法的，但它走的是 HTML 渲染路径，不是 CSS；若同时存在background和background-color规则，前者会重置后者 - 使用 CSS 变量时：
--primary: "#ff6b35";错，必须去掉引号：--primary: #ff6b35;，否则var(--primary)返回字符串而非颜色值 - 动态拼接颜色（如
background: ${color}）时，确保color变量本身是合法 hex 字符串，不含空格、引号或非法字符
修复后怎么验证真正生效？
别只看页面“看起来对了”——很多情况是继承色或默认色在撑场面：
- 在 DevTools 的 Computed 面板里搜索
color或background-color，确认该值确实出现在最终计算结果中 - 临时加
border: 1px solid red;检查元素是否有尺寸，排除“颜色写了但盒子是空的”干扰 - 用色值提取工具（如浏览器插件 ColorZilla）点取目标区域，比对是否与你写的 hex 完全一致，避免设计稿导出误差或显示环境色域偏移
- 真机调试时注意 Android WebView 或旧版 Chrome（≤79）对
#RRGGBBAA的支持缺失——即使 hex 本身合法，八位写法也可能静默失效
最危险的不是写错，而是写错后毫无提示。盯紧 Styles 面板里的删除线，那是浏览器唯一留给你的线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
