浏览器将#ff00gg等非法十六进制颜色值整条静默忽略，因其不符合css规范对3位或6位、仅含0–9/a–f字符的严格要求，不解析、不fallback、不报错；devtools中该声明带删除线且computed中无对应值即可识别。
因为浏览器把 #ff00gg 这类非法 hex 当作「无效值」直接丢弃，不是报错，而是静默忽略整条声明——它连解析都懒得做，更不会 fallback 或截断补位。
为什么写错一位就全失效，而不是只错一个通道？
CSS 规范要求 hex 颜色必须是严格合法的字符串：3 位（#rgb）或 6 位（#rrggbb），且每位只能是 0–9 或 a–f（大小写不敏感）。#ff00gg 中的 g 不在允许字符集内，整个值立刻被判为无效；同理 #12345（5 位）、#12（2 位）、#fff0（4 位）全部不合法。浏览器不会尝试“猜你想写啥”，也不会取前三位或补零——它直接跳过这行样式。
DevTools 里怎么一眼识别这种错误？
打开开发者工具 → Elements 面板 → 找到对应元素 → Styles 标签页中看你的 color 或 background-color 声明：
- 如果整行带删除线（strikethrough），且右侧 Computed 面板查不到该属性值，基本就是 hex 无效
- 注意不是所有删除线都代表 hex 错——也可能是优先级被覆盖，但 hex 错的删除线通常孤立出现，无其他同名规则竞争
- 临时替换成
red或#000测试：如果能生效，说明问题出在原始颜色值本身
rgb() / hsl() 也一样会静默失效吗？
会，而且条件更苛刻：
-
rgb(255, 200, 100)✅，但rgb("255", 200, 100)❌（引号）、rgb(256, 0, 0)❌（超 255）、rgb(100%, 200, 50%)❌（混用单位） -
hsl(210, 70%, 60%)✅，但hsl(210, 70, 60)❌（缺 %）、hsl(210deg, 70%, 60)❌（l 缺 %）、hsl(400, 70%, 60%)❌（h 超 360） - 所有这些错误都不会触发控制台警告，只会让整条声明消失，和 hex 写错一位的处理逻辑完全一致
真正麻烦的不是“写不对”，而是它不报错、不提示、不 fallback——你得盯着 DevTools 里那条带删除线的样式，才能意识到问题不在选择器、不在优先级、不在 display，而只是 g 不该出现在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
