最快定位颜色失效的方法是查看浏览器开发者工具的computed面板：若color值带删除线说明被高优先级规则覆盖，显示inherit需查父级，未出现则选择器未命中；还需排查-webkit-text-fill-color、伪元素、scoped样式、内联样式及shadow dom影响。
颜色声明没生效，不是color写错了，而是它被别的规则压住了——直接看浏览器开发者工具的 Computed 面板，比猜更准。
用 DevTools 的 Computed 面板确认最终 color 值
这是最快定位“到底谁在管颜色”的方式。打开开发者工具（F12），选中文字元素，在右侧 Computed 标签页里找 color 这一行：
- 如果值是灰色、带删除线，说明被更高优先级规则覆盖了
- 如果值是浅色但显示为“
inherit”，说明它从父级继承而来，得往上查父元素的color - 如果整行根本没出现，说明选择器根本没命中这个元素——可能 class 拼错、HTML 没加 class、或 scoped style 未穿透
检查是否被 -webkit-text-fill-color 或伪元素接管
某些场景下，color 看似无效，其实是被浏览器底层机制或特殊 CSS 属性接管了：
- 禁用状态的
<input>或<select></select>：Chrome/Safari 会用-webkit-text-fill-color渲染只读文本，此时改color没用，必须显式设-webkit-text-fill-color: #333 - 占位符文字（
::placeholder）：它有自己的颜色逻辑，需单独写input::placeholder { color: #999 } - 伪元素生成的文字（如
::before里用content: "★"）：主元素的color不会继承过去，得给伪元素单独设
排查选择器是否真的命中目标元素
常见“写了却没变”，本质是样式根本没 applied 到该文字上：
- 链接文字写
li:hover { color: red }→ 实际生效的是a标签，应改用li:hover a { color: red } - Vue 单文件组件用了
<style scoped></style>，外部样式无法穿透，需用:deep(a) { color: red }（Vue 3）或::v-deep a（Vue 2） - Tailwind 或其他原子类框架中，
text-red-500被后续的text-gray-700覆盖——类名顺序即应用顺序，后写的生效 - Shadow DOM 内部元素（如
<vaadin-button></vaadin-button>）：外部 CSS 默认进不去，得用::part(button)或组件提供的主题 API
验证是否被内联样式或 CSS-in-JS 强制覆盖
内联样式（style="color: blue"）原生权重最高（1000），连 !important 都压不过它：
- 检查 Elements 面板里元素是否有
style属性，尤其注意 React/Vue 组件是否通过style={{ color: '...' }}动态注入 - CSS-in-JS（如 Emotion、Styled Components）生成的 class 权重一般不如内联样式硬，但可能比普通 class 高——看 Styles 面板里那条规则是否带
[data-emotion]类似属性 - 第三方 UI 库（如 Ant Design）常把关键样式写成内联，或用
!important锁死，此时应优先用其官方主题方案（createTheme）而非硬覆盖
真正卡住的点往往不在语法对错，而在“你以为改的是这个元素，其实改的是它的父级、伪元素、或被 Shadow DOM 隔离的子树”。每次怀疑颜色失效，先开 Computed，再顺藤摸根——别跳过这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
