浏览器默认样式（ua样式）会高优先级覆盖color，需用更具体选择器、伪类如:-webkit-autofill或::-moz-ui-invalid、继承链排查及devtools验证。
浏览器默认样式（尤其是表单控件、链接、按钮）会用高优先级规则强行覆盖你的 color，这不是你写错了，而是它“自带护甲”。
检查是否命中 :-webkit-autofill 或 ::-moz-ui-invalid
输入框自动填充后文字变蓝/背景变黄？密码字段失焦后颜色恢复但聚焦时又异常？这基本是 WebKit 或 Gecko 的自动填充/校验样式在作祟。
- Chrome/Safari 必须用
input:-webkit-autofill单独设-webkit-text-fill-color，不能只写color - Firefox 表单验证失败时会加
::-moz-ui-invalid，需额外覆盖：input::-moz-ui-invalid { color: #333; } - 这两个伪类不支持所有 CSS 属性，
transition和box-shadow是少数可用的“绕过”手段（比如用-webkit-box-shadow: 0 0 0 1000px #fff inset盖掉黄色背景）
排查 a、button、input 等元素的 UA 样式干扰
浏览器用户代理样式表（user agent stylesheet）对这些元素有硬编码规则，例如 Chrome 默认给 a 设 color: -webkit-link;，权重虽不高，但常因你没写具体选择器而胜出。
- 打开 DevTools → Elements → 右侧 Styles 面板，找带「user agent stylesheet」标注的
color规则 - 不要只写
.btn { color: red; }，改用更具体的选择器，如body .btn或form .submit-btn - 避免全局重置污染：若用了
a { color: #007bff; }，它会盖掉所有未加权的text-red-500类（Tailwind 用户尤其注意）
确认是否被 inherit、currentColor 或父级强制继承劫持
很多 UI 组件库（Ant Design、MUI）或自定义组件内部设了 color: inherit，导致子元素颜色完全跟随父级，你写的 color 根本没机会生效。
- 在 Computed 面板看最终
color值来源，若显示为「inherited from」，说明父级在控制- 临时加
color: red !important;测试：若生效，证明是继承链压制，而非选择器没命中- 对内联元素（如
span包裹的文字），确保父容器没设color: transparent或opacity: 0—— 这些会让文字“不可见”，误判为颜色失效警惕 scoped 样式、Shadow DOM 和 CSS-in-JS 的穿透限制
Vue 的
<style scoped></style>、Web Components 的 Shadow DOM、Emotion 生成的 class，都会隔离样式作用域。你写的color可能根本没传进去。- Vue 2 用
::v-deep(.target) { color: red; }，Vue 3 改用:deep(.target) { color: red; } - 遇到
#shadow-root (open)，外部 CSS 默认无效；优先查组件文档是否暴露part="label"，然后用::part(label) { color: red; } - CSS-in-JS（如 Styled Components）生成的 class 权重通常低于内联样式，若组件内部写了
style={{ color: 'blue' }}，你的外部 CSS 几乎无法覆盖
最易被忽略的是：你以为在调颜色，其实是在和浏览器的“默认人格”打架。UA 样式不报错、不警告，只安静地赢——所以别猜，先开 DevTools 看 Computed。
- 临时加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
