color属性专用于设置文本颜色，支持多种颜色值，但不作用于边框、背景或SVG；需注意继承性、覆盖规则、伪元素、可访问性对比度及语义化管理。
color 属性直接控制文字颜色
设置文字颜色最核心的 CSS 属性就是 color，它作用于文本内容（包括子元素继承的文字），不作用于边框、背景或 SVG 图形。它的值可以是命名色（如 red）、十六进制（#333）、RGB（rgb(51, 51, 51)）、RGBA（rgba(0, 0, 0, 0.8)）或 HSL 等。
常见误用是以为 color 能改变图标字体（如 Font Awesome）或伪元素 ::before 的颜色——其实可以，但前提是这些内容确实是“文本节点”或使用了字体图标且未被其他规则覆盖。
- 若父元素设了
color: #666，子元素默认继承，无需重复写 - 行内元素（如
）和块级元素（如）都支持color - 注意：当元素有
opacity: 0或visibility: hidden时，color仍生效，只是不可见
避免 color 被 !important 或高优先级选择器覆盖
实际项目中常遇到写了 color: blue 却没生效，大概率是被更具体的选择器或带 !important 的规则覆盖。比如框架（如 Ant Design）或重置样式（如 Normalize.css）可能对 button、a、input 等设置了强约束的 color。
- 用浏览器开发者工具检查「Computed」面板，看最终生效的
color值及来源路径 - 不要滥用
!important；优先提升选择器特异性，例如从.text改为.container .text -
a标签有:link、:visited、:hover、:active多个状态，需分别设置或统一用a { color: inherit; }继承父级
统一文本样式的合理范围：别用 color 覆盖所有场景
color 只管前景文字色，不能替代语义化样式管理。比如标题层级（h1–h6）、强调文本（em、strong）、禁用态（disabled）、链接等，应结合类名或语义标签分层控制，而非全靠一个 color 规则硬推。
立即学习“前端免费学习笔记（深入）”；
- 推荐定义基础色变量，例如
--text-primary: #222，再在 :root 中声明，各组件通过color: var(--text-primary)引用 - 深色模式下，仅改
color不够，还需同步调整background-color和对比度，否则可访问性不达标 - 表单控件（
input、textarea）的 placeholder 文字需用::placeholder伪元素单独设color，它不继承父级color
color 与可访问性：别只看视觉效果
设置 color 后必须验证文字与背景的对比度是否达标（WCAG AA 级要求至少 4.5:1）。浅灰文字配白底（如 #999 on #fff）很常见，但对比度仅约 2.2:1，对弱视用户极不友好。
- 用浏览器插件（如 axe DevTools）或在线工具（WebAIM Contrast Checker）快速检测
- 避免用
color: #ccc做正文；正文建议不低于#333（黑度 20% 以上） - 禁用态文字（
opacity: 0.5+ 深色）往往对比度不足，应改用更低透明度+更深色，或直接换色值
color，而是判断什么时候该由组件自己决定文字色，什么时候该由主题系统注入，以及哪些地方的对比度隐患根本不会在设计稿里显示出来。 
