color属性需写在元素style内或CSS规则中且选择器匹配才生效；常见失效原因为优先级覆盖、非文本元素或继承问题；支持关键字、16进制、rgb()、hsl()四种色值写法。
color 属性写在哪才生效
直接写在元素的 style 里最保险，比如 <p style="color: red;">；但更常见的是写在 CSS 规则中，必须确保选择器能正确匹配到目标文本元素。容易踩的坑是：写了 color 却没生效，大概率是 CSS 优先级被覆盖（比如父元素设了 color: #333，子元素又没用更具体的选择器重写），或者元素本身不是可继承颜色的文本容器（如 <img> 或伪元素未显式启用）。
常见错误现象：color 值写了，但文字还是黑色——先检查浏览器开发者工具里该属性是否被划掉（表示被更高优先级规则覆盖）。
color 支持哪些色值写法
四种主流写法都能用，但兼容性和可维护性差异明显：
-
color: red—— 关键字，最简但颜色少（140+个标准名），rebeccapurple这种冷门名容易拼错 -
color: #ff6b6b—— 16进制，最常用，注意必须是 3 位或 6 位（#f6b和#ff66bb都合法） -
color: rgb(255, 107, 107)—— 函数式，适合动态生成；rgba(255, 107, 107, 0.8)可加透明度，但 IE8 不支持 -
color: hsl(0, 50%, 70%)—— 色相/饱和度/亮度，调色直观，但旧版 Safari 对hsla支持不稳定
使用场景：团队协作项目建议统一用 6 位十六进制或 rgb()，避免关键字歧义（比如 orange 是橙色，但 gray 在不同浏览器里可能偏蓝或偏紫）。
立即学习“前端免费学习笔记（深入）”；
为什么 span 里改了 color，外面的文字也变色了
color 是可继承属性，所有文本类后代元素（<span>、<em>、<strong> 等）默认会继承父级的 color 值。所以如果你给 <div> 设了 color: blue，里面所有没单独设色的 <span> 就自动变蓝。
解决办法只有两个：
- 给需要不同颜色的子元素显式重写
color（比如span.special { color: green; }） - 用
color: inherit强制继承，或color: initial重置为浏览器默认（通常是黑色）
性能影响极小，但滥用 !important 来覆盖继承色会导致后续调试困难——优先用更具体的选择器代替。
color 在 button 或 input 上不生效怎么办
原生表单控件（<button>、<input type="text">）的文本颜色受系统主题和浏览器默认样式干扰严重。尤其 <input> 的 color 在 Chrome 中只影响文字，不影响光标或 placeholder；而 ::placeholder 需要单独写：
input::placeholder {
color: #999;
}
常见错误现象：input { color: red; } 写了，但输入文字还是灰色——检查是否被浏览器用户代理样式（user agent stylesheet）覆盖，可在开发者工具里看 computed 标签页确认最终生效值。
兼容性提醒：button 在 Firefox 下默认有深色文字阴影，有时会让 color 看起来“变暗”，需配合 text-shadow: none 清除。
真正难搞的是那些嵌套在框架组件里的文本，比如 React 的 Button 组件内部用了 <span> 包裹文字，你写的 button { color: red } 可能根本没打中目标节点——得打开 DOM 树看实际结构再下选择器。
