css-variables - 如何定义css自定义属性

Question

我在根元素的主样式表中为边框颜色、文本颜色等定义了一个自定义 css 变量/属性。然后在后续样式表的各个位置使用它们。渲染时的浏览器显示了我定义的颜色，但是当我检查使用自定义属性的元素属性时（通过将鼠标指针放在该属性/变量上的 chrome 开发工具，它说未定义）。我无法理解。有人可以帮我解决这个问题。

/* my main style sheet */
:root{--myColor:red;}

/* secondary style sheet case 1*/
border-color-top: var(--myColor); 
/* here mouse pointer over property in devtools says *--myColor is not defined* yet the border renders red color;*/

标签： css-variables