我在 Lea 的测验中属于答错的 82% 的人 Lea 的测验 (推文版本）。
这是代码
:root {
--accent-color: skyblue;
}
div {
--accent-color: revert;
background: var(--accent-color, orange);
}那么我期望 <div> 有什么背景颜色呢？
我的大脑是这样思考的
- 好吧，
--accent-color已声明，所以肯定不是orange（备用值）。 - 背景的值是
revert，所以它本质上是background: revert; - 但是
background属性不会继承，即使你强制它继承，它也会从<body>继承，而不是根元素。 - 所以……
transparent。
不。
Lea
[因为该值是
revert，所以它]取消了任何作者样式，并重置回该属性从用户样式表和 UA 样式表中获取的任何值。假设用户样式表中没有--accent-color声明，当然 UA 样式表不会设置自定义属性，这意味着该属性没有值。由于自定义属性是继承属性（除非它们 已注册 为
inherits: false，但此属性未注册），这意味着继承的值会向下传递，也就是——你猜对了——skyblue。
Stephen 前几天发布了一个类似的测验
同样，我的大脑完全错误地理解了它。它是这样思考的
- 好的，
--color已声明，所以它不是蓝色（备用值）。 - 它不是
red，因为第二个声明将覆盖第一个声明。 - 所以，它本质上类似于
p { color: inherit; }。 <p>将从<body>继承yellow，它本来也会自然地这样做，但无论如何，它仍然是yellow。
不。
显然，那里的 inherit 实际上是从树中设置它的下一个位置继承的，html 确实如此，所以是 green。这实际上是正常继承的工作方式。它只是一个脑筋急转弯，因为很容易将 color 属性与 --color 自定义属性混淆。
另外，了解当你使用 @property 实际声明自定义属性时，你可以指定是否希望它继承也很有用。所以这会改变这些脑筋急转弯的游戏规则！
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}