先检查devtools中background-color是否被划删除线；若无删除线但颜色不显，常见原因是元素无宽高、background复合属性覆盖、hex格式错误（如#fffff、#ff00gg）、属性名拼错（backgroud-color），或jsx/vue中引号误用导致样式未进入cssom。
直接看 DevTools 的 Styles 面板里 background-color 或 color 那行有没有划删除线；没有划线但颜色还是没出现，八成是元素没尺寸、被覆盖，或者你写的根本不是标准 hex 格式。
hex 值本身写错了但浏览器不报错
浏览器对非法 hex 是静默忽略，不是报错。常见无效写法包括：
-
#fffff（5位，必须是3位或6位） -
#ff00gg（g不是合法十六进制字符，只认0–9和a–f） -
#1234567（7位，#rrggbbaa必须严格8位小写，且不能有空格或引号） -
backgroud-color（拼错属性名，DevTools 里整行灰掉）
验证方法：临时换成 color: red; 或 background-color: #f00;，看是否立刻生效。能生效，说明问题出在 hex 值本身。
元素没宽高导致颜色“看不见”
背景色只渲染在内容区 + padding 区，如果元素 width/height 是 0，再准的颜色也白搭。典型场景：
- 浮动子元素未清除，父容器高度塌陷 →
background-color失效 -
position: absolute且没设width/height，元素收缩到内容尺寸（常为 0） - Flex/Grid 容器中空子项未设
min-width/min-height
立刻检查 DevTools Layout 面板的 width/height 值；加一句 border: 1px solid red; 就能暴露真实尺寸。
background 复合属性悄悄覆盖 background-color
只要某条规则用了 background（哪怕只写了一张图），就会把 background-color、background-image 等全部重置为初始值。你后面单独写的 background-color: #fff; 如果权重不够或顺序靠前，等于没写。
- 在 Elements 面板里搜索该元素所有匹配的选择器，重点找带
background:的声明 - 避免混用：
background: url(x.png);和background-color: #fff;分开写极易冲突 - 推荐统一用复合写法：
background: #fff url(x.png) no-repeat center; - 特别注意内联样式
style="background: ..."和!important，它们优先级极高，容易掩盖你的设置
JSX 或模板语法里引号引发的隐性失效
在 React/Vue 中，background="#fff" 是 HTML 属性，不是 CSS 值；浏览器会当成字符串处理，不会解析为颜色。
- JSX 正确写法：
style={{ background: "#fff" }}（双大括号，对象写法） - Vue 模板正确写法：
:style="{ background: '#fff' }"或style="background: #fff;"（纯 CSS 字符串） - 错误写法：
style="background: '#fff';"（引号包住值，变成字符串字面量）
这种错误在控制台里几乎不报错，但颜色就是不出现——因为样式压根没进 CSSOM。
最容易被忽略的是：你以为在调颜色，其实是在调尺寸、覆盖关系或 JS 注入逻辑。先确认元素真有渲染区域，再确认样式真进了 computed，最后才查 hex 本身。否则花半小时调 #4a90e2，结果发现它根本没机会画出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
