CSS简写属性与单个子属性共存时，浏览器的正确行为规范是什么？

当CSS简写属性和对应单个子属性共同作用时，Chrome和Firefox的行为符合CSS规范，Safari的表现不符合规范。

核心规则：CSS简写属性的重置特性 #

CSS规范明确规定：简写属性会隐式将所有未在简写中明确指定的子属性重置为初始值，无论这些子属性之前有没有被单独声明过。

回到你的例子：

a {
  text-decoration-color: red; /* 单独设置下划线颜色为红色 */
}

.oops{
  text-decoration: underline; /* 简写属性，仅明确指定了text-decoration-line */
}

text-decoration是包含text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness的简写属性。当你写text-decoration: underline时，只显式设置了text-decoration-line: underline，其余三个子属性都会被重置为初始值：

• text-decoration-color重置为currentcolor（即文本默认颜色）
• text-decoration-style重置为solid
• text-decoration-thickness重置为auto

所以之前a标签的text-decoration-color: red会被这个简写规则覆盖，下划线颜色变回默认值，这正是Chrome和Firefox的表现。

为什么改用text-decoration-line: underline能消除差异？ #

text-decoration-line是单个子属性，它只会修改text-decoration的“线类型”部分，不会影响其他子属性（比如text-decoration-color）。因此a标签的text-decoration-color: red依然生效，所有浏览器都会显示红色下划线，表现一致。

内容的提问来源于stack exchange，提问作者Mark Fisher