CSS 自定义属性值中 !important 的令人惊讶的行为

嗯！我没有意识到 CSS 自定义属性在其值的 !important 工作方式方面有其自己的解析行为。呃，尽管写了一份指南关于它们。 😬 但现在它已更新。

Stefan Judis 清楚地记录了它。问题是 !important 在最终值中根本没有使用。所以

div {
  --color: red !important;
  color: var(--color);
  color: yellow;
}

感觉 red 应该获胜，但因为 !important 最终从自定义属性值中删除，所以 yellow 获胜。而且这与 color 声明的顺序无关 - 如果 color: red !important; 是第一个声明，那么 red 就会获胜。

但这不像 !important 只是被删除和忽略；它是以作用域方式使用的，会影响哪个自定义属性值获胜。但是，当该值被应用时，!important 就消失了。 Stefan 的示例

div {
  /*
    `!important` overrules the
    other `--color` definitions
  */
  --color: red !important;
  color: var(--color);
}

.class {
  --color: blue;
}

#id {
  --color: yellow;
}

这感觉很奇怪（对我来说），因为你会认为在 #id 上声明的 yellow 会获胜，因为它具有最高的特殊性。但是这就是作用域行为的处理方式 - !important 使 red 成为获胜者，然后像这样应用于 color。

直接链接 →

Šime Vidas

# 2021 年 12 月 17 日

有两点要记住

自定义属性是属性，所以 !important 对它们的作用方式相同。
!important 不是属性值的一部分（它从未是）。

亚当

# 2021 年 12 月 17 日

我不确定为什么这会让人感到惊讶，!important 不是值的一部分，而是规则的一部分，在这种情况下，它会影响 --color 的解析方式，仅此而已。

Chris Coyier

评论永久链接# 2021 年 12 月 17 日

我只是觉得很惊讶，抱歉。

这就像在 JavaScript 中，如果你设置 foo = "bing bong" 然后 console.log(foo) 说 bing，因为你必须知道 bong 是一个超级特殊的东西，会从值中删除。

南

# 2021 年 12 月 18 日

我认为更有趣的是像“inherit”和“initial”这样的关键字如何影响自定义属性。无法将这些关键字作为值传递，所以在下面的示例中，.child 的背景将是蓝色，而不是黄色

.parent {
  --bg: blue;
  background: yellow;
}

.child {
  --bg: inherit;
  background: var(--bg);
}

“initial” 甚至更有趣，它“删除”了变量（因为它最初不存在），因此在以后与回退一起使用时 - 将使用回退值

#id {
  --bg: initial;
  background: var(--bg, white);
}

Alexis Córdova

# 2021 年 12 月 18 日

只是在这里随口说说，但如果你正在创建一个可消费的、可主题化的组件，你能使用 !important 来创建“私有”、不可变的自定义属性吗？这样，您就不必使用 Sass 之类的东西来进行“内部”变量（用于内部共享和可重复的代码片段，但不是您希望消费者使用的内容）和自定义属性作为您的外部样式 API（因为没有更好的说法）。

亚历克

# 2024 年 3 月 13 日

我发现一件特别令人惊讶的事情

div {
  color: var(--color);
}

.class {
  --color: blue;
}

:root {
  --color: red !important;
}

…输出蓝色文本，而我期待的是红色

评论

发表评论 取消回复

发表评论取消回复