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;。
立即学习“前端免费学习笔记（深入）”；
现代项目该用什么颜色值写法？
推荐按场景分层使用，兼顾可维护性与兼容性：
- 基础色板统一管理：用 CSS 自定义属性，例如
:root { --primary: #3b82f6; }，后续所有color: var(--primary); - 需要动态调整明度/饱和度时：用
hsl()，比如color: hsl(210, 100%, 60%);，比手动换算十六进制更直观 - 必须兼容老浏览器（IE11）：避免
hwb()、lab()和颜色函数如color-mix()，它们目前仅 Chromium/Firefox 新版本支持
别在同一个项目里混用 #3b8、rgb(59, 130, 246)、blue 这三种写法——维护时根本没法全局替换或生成主题。
真正难的不是选哪个颜色好看，而是确保它在不同设备、不同系统配色模式（prefers-color-scheme）、不同对比度要求（WCAG AA/AAA）下都可用。颜色从来不是孤立设置的，它得嵌在整套设计系统里跑通。
