我在想如何在不使用内联样式的情况下使用 css 变量。我想我可以用这个：
[data-color] {
--color: attr(data-color color, green);
}
* {
color: var(--color, blue);
}
<div data-color="red">hello</div>
看来 attr 仅在伪选择器中起作用（并且可能仅在content:财产），但是MDN 属性页面 https://developer.mozilla.org/en-US/docs/Web/CSS/attr says:
attr() CSS 函数用于检索所选元素的属性值并在样式表中使用它。它也可以用在伪元素上，在这种情况下，返回伪元素的原始元素上的属性值。
甚至还有演示，但它不能在 Linux 上的 Chrome 中运行，所以对我来说没有用。它甚至无法在 Linux 上的 Firefox 中运行。
有没有其他方法可以使用 css 变量而无需内联样式且无需编写动态<style></style>和随机数？
还没有。在同一链接中，您可以阅读：
注意： attr() 函数可与任何 CSS 属性一起使用，但对内容以外的属性的支持尚处于实验阶段，并且对类型或单位参数的支持很少。
仍然没有浏览器支持attr()对于与内容不同的属性，也不支持类型或单位。
值得注意的是，您可以使用attr()在 CSS 变量内，但稍后需要与内容一起使用。 CSS 变量只是一个中间体，因此我们不会根据变量来评估支持，而是根据将使用该变量的属性来评估支持。
[data-color] {
--color: attr(data-color);
}
*::before {
content: var(--color, "default");
color:blue;
}
<div data-color="red">hello</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
