颜色属性本身没有独立优先级，完全服从CSS整体优先级规则：选择器权重（特异性）、源顺序和!important决定color声明生效与否，而red、#f00、rgb()等颜色值写法在权重计算中完全等价且不贡献任何权重。
颜色属性本身没有独立优先级，它完全服从 CSS 整体优先级规则（即特异性 + 源顺序 + !important）。 你写的 color: red 和 color: blue 冲突时，谁生效，取决于哪条规则的**选择器权重更高**、是否带 !important、是否是行内样式，而不是“颜色值”或“颜色写法”（如 red vs #f00 vs rgb(255,0,0)）有高低之分。
为什么 color:red 和 color:#f00 总是平级？
因为颜色值只是属性的取值，不是选择器的一部分。浏览器只看“谁定义了 color”，不看“你怎么写的 color”。red、#f00、rgb(255,0,0)、currentColor 在优先级计算中完全等价——它们都不贡献任何权重。
- 所有颜色表示法（关键词、hex、rgb、hsl、系统色、
inherit、initial等）在特异性计算中无影响 - 哪怕你用
color: #000000写满 100 个零，权重还是 0 - 真正起作用的是：这条
color声明来自哪个选择器 —— 是div、.btn还是#header
color 属性被覆盖的常见真实场景
实际开发中，color 被意外覆盖，往往不是因为“颜色写法错了”，而是选择器层级或继承关系没理清：
-
body { color: gray; }→ 子元素没设color，就继承 gray；但加了p { color: black; }后，p就不再继承 -
.card span { color: #333; }权重是 (0,0,2,2)，而#user-name { color: blue; }权重是 (0,1,0,0) → 后者更高，span也会变蓝（如果它同时匹配两个） - 行内
style="color: orange;"永远压倒所有外部 CSS 中的color声明（除非后者带!important） -
a:hover { color: red !important; }会覆盖nav a { color: #666; }，哪怕后者选择器更具体
currentColor 的特殊性：它不改变优先级，但依赖计算结果
currentColor 是一个动态关键字，它的值等于该元素当前计算出的 color 值。它本身不增加权重，但会把其他属性（如 border-color、box-shadow）“绑定”到 color 的最终结果上：
立即学习“前端免费学习笔记（深入）”；
button {
color: #2a5;
border: 2px solid currentColor; /* 边框颜色 = #2a5 */
}
button.warning {
color: #d33; /* 此时 border 自动变成 #d33，无需重写 border */
}-
currentColor不参与权重计算，但它让多个属性共享同一个优先级源头 - 如果
color被高权重规则覆盖，currentColor立刻跟着变 —— 它不是“独立颜色”，而是“颜色引用” - 注意：伪元素（如
::before）使用currentColor时，取的是**宿主元素**的color，不是自身
真正容易被忽略的点是：很多人盯着 color 值本身调来调去，却没检查 div.header .title 和 .title 哪个权重高、有没有被父级 color 继承干扰、或者某处悄悄加了 !important —— 颜色只是表象，选择器和层叠逻辑才是根因。
