CSS中不存在“颜色选择器”，color是属性而非选择器；需用选择器选中元素后设置color等属性，注意优先级、继承、用户代理样式及color与background-color、opacity的区别，推荐使用CSS自定义属性统一管理颜色。
CSS 颜色选择器本身并不存在——color 是 CSS 属性，不是选择器；真正起作用的是「用选择器选中元素，再用 color 或其他颜色相关属性设置样式」。混淆这点会导致写不出预期效果，甚至调试半天找不到问题在哪。
为什么写 .btn { color: blue; } 没变色？
常见原因是优先级或继承规则干扰：
-
color只影响文本内容（包括::placeholder、::selection等伪元素），对背景、边框、SVG 填充无效——该用background-color、border-color或fill - 内联样式或更具体的选择器（如
div#header a:hover）会覆盖你的规则，用浏览器开发者工具检查「Computed」面板看最终生效值 - 某些元素（如
button、input）有用户代理样式表默认颜色，需显式重置，例如button { color: inherit; }才能继承父级文字色
color、background-color 和 opacity 的视觉效果差异
三者常被混用，但行为完全不同：
-
color：仅控制前景文本/光标/部分伪元素颜色，不改变透明度或背景 -
background-color：控制元素背景，支持rgba(0, 0, 0, 0.5)直接设透明通道，比opacity更精准（不会连子元素一起变淡） -
opacity：作用于整个元素及其所有子节点，且会触发新层叠上下文，可能影响z-index行为
比如想让按钮背景半透但文字清晰，用 background-color: rgba(0, 128, 255, 0.2);，别用 opacity: 0.2;。
立即学习“前端免费学习笔记（深入）”；
