您可以从html传递css值：

<button style="
    --tooltip-string: 'Ug. Tooltips.';
    --tooltip-color: #f06d06;
    --tooltip-font-size: 11px;
    --tooltip-top: -10px">
  Button
</button>

到CSS：

button::after {
  content: var(--tooltip-string);
  color: var(--tooltip-color);
  font-size: var(--tooltip-font-size);
}

源代码：https://css-tricks.com/css-attr-function-got-nothin-custom-properties/代码源代码：https://codepen.io/chriscoyier/pen/EbxVME

阅读文档始终是一个好主意：https://developer.mozilla.org/en/docs/Web/CSS/attr

惊喜吧！如果没有任何东西支持它，那么它就不会工作;）
备选方案：如果您知道自己的颜色范围有限，请尝试：

[data-color=red] {background-color:red !important}
[data-color=blue] {background-color:blue !important}
[data-color=zophan-blue] {background-color:#33ccff !important}

正如您所看到的，这允许灵活性，例如定义您自己的颜色;）

如果只讨论颜色，则可以使用currentColor值作为代理。
例如：
HTML语言

<td>
   <span class="bgborder" style="color: #e7663f"></span>
   <i class="fa fa-copy"></i>
</td>

CSS

.bgborder {
  background-color: currentColor;
}

目前，CSS attr函数只能在浏览器中与content属性一起使用

请参阅此处了解兼容性

根据CSS 2规范：
限于内容属性
CSS3将对此（提案）进行扩展
..可用于所有属性;可能会传回<string>以外的值

我猜你正在寻找的是CSS variables，你可以在Chrome，Firefox和Safari上使用。
并可在Lea Verou的视频中看到更多内容

另一个非常方便javascript：

<P _my_colour="red" >one</P>
<P _my_colour="blue">two</P>
<P _my_colour="green">three</P>
<script>
    var my_col = document.querySelectorAll("[_my_colour]");
      my_col.forEach(element => {
        element.style.color = element.getAttribute("_my_colour");
    })

</script>

其他贡献者概述的css解决方案通常更好更简单，所以JS解决方案在某种程度上是重新发明了轮子，但是确实明确地做了你在问题中想要做的事情，所以在这里是为了完整性。

不知何故，它总是可能的！.例如：让我们在css中定义一个全局变量：

:root {
  --theglobalvariable: coral;
}

在Javascript中：让我们修改javascript中的全局变量，将元素属性的内容赋值为值

var root = document.querySelector(':root');
root.style.setProperty('--theglobalvariable', document.getElementById('IdElement').getAttribute('NameOfAttribute'));

现在，在Css中，让我们将全局变量的值插入到我们想要的元素中，然后尽情享受吧！

.someElement{
    color:var(--theglobalvariable);
}