color属性常不生效是因被浏览器user-agent样式压制，须显式设置button及button:disabled的color，并配对background-color保障可读性。
color 属性经常不生效，不是你写错了，而是被浏览器默认样式压制了。必须显式覆盖 button 和 button:disabled 两个状态，且要配对 background-color 才能真正看见效果。
为什么 button { color: red; } 常常无效
Chrome、Firefox 等浏览器会给 button 强加 user-agent 样式，比如系统主题色（深灰文字 + 浅灰背景），权重高于普通 CSS 规则。你在 DevTools 里看到 color 被划掉，基本就是这个原因。
- 只写
button { color: #c0392b; }→ 正常态可能生效，但button:disabled仍发灰 - 父容器设了
color: blue→button不会继承，它有自己的重置逻辑 - 用了
style="color: red"→ 临时调试可以，但 JS 后续用el.style.color = 'blue'会覆盖类样式，很难清理
正确写法：用 class 显式控制两个状态
抽成 CSS 类是最可控的方式，既能复用，又能配合暗色模式和可访问性需求。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须同时定义：
.btn-error { color: #d32f2f; }和.btn-error:disabled { color: #7f8c8d; } - 禁用态别偷懒——浏览器不会自动按比例降亮度，得你自己定灰阶值
- 搭配
background-color使用，否则浅色文字落在白色背景上直接消失 - 暗色模式下建议加媒体查询：
@media (prefers-color-scheme: dark) { .btn-error { color: #f44336; } }
内联 style 和 JS 动态改色的坑
内联 style="color: #e74c3c;" 是最快的调试手段，但上线项目里它容易变成维护雷区。
- React/Vue 中别拼字符串：
style={{ color: status === 'error' ? '#d32f2f' : '#333' }}是 OK 的，但避免style={`color: ${status === 'error' ? '#d32f2f' : '#333'}`} - JS 直接操作
el.style.color后，想用 class 拉回来，得手动清空或加!important（不推荐） - 用
currentColor做边框色（如border: 1px solid currentColor）没问题，但它不响应暗色模式切换
对比度和可读性不能靠肉眼判断
设了 color: #eee 和 background-color: white 看起来“差不多”，实际对比度可能只有 1.2:1，远低于 WCAG 要求的 4.5:1。
- 用 Chrome DevTools 的 “Accessibility” 面板实时查对比度，别估
- 禁用态推荐组合：
background-color: #f1f1f1+color: #95a5a6，比全压暗更易读 - 移动端注意字体大小：小于
16px的font-size在 iOS Safari 会被强制放大，导致布局跳动
最常被忽略的不是怎么写 color，而是忘了 button:disabled 和对比度验证——这两个点一漏，按钮在真实场景中就等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
