在我的页面顶部，我有一堆 CSS 自定义属性，它们适用于我的所有样式表，但是，当我尝试通过::before/::after伪元素访问它们时，Chrome 指出该变量未定义。
举个例子：
<head>
...
<style>
:root {
--my-variable: #ff0000;
}
</style>
</head>
在我的样式表中：
.box {
background-color: var(--my-variable); // Works fine
}
.box::after {
background-color: var(--my-variable); // --my-variable is not defined
}
只是想知道我是否错过了什么？
我也刚刚注意到它在 Firefox 上运行良好，所以也许这是一个错误？
更新：看来CSS属性不是在伪元素中继承的，所以需要根据这个答案直接设置
工作示例：
:root, *::before, *::after {
--my-property: xyz;
}
我一直在研究Flexbox属性,order: 1以便在我的div设置为class时将其设置为第一个.default-address.我的问题是有任意数量的.address下面这个div的,所以我不能使用order: 2,order: 3等等.
.container {
display: flex;
flex-direction: column;
}
.default-address {
order: 1;
}<div class="container">
<div class="default-address">123 Sesame Street</div>
<div class="address">5th Avenue</div>
<div class="address">1600 Pennsylvania Avenue</div>
<div class="address">221 B Baker St.</div>
</div>有没有办法定义第一个订单而不定义其他订单？