在CSS样式中使用自定义标记属性值

本质上，我正在尝试创建一个CSS样式，可以使用自定义标记属性的值作为它们的值。我读过关于“attr（）”函数的内容，它似乎只在：before/：after选择器的内容属性中起作用。基本上，我想做如下事情：

HTML

我现在使用的另一种方法是使用jQuery css（）在每个跨距上使用其fgprop attr值设置颜色，但这似乎非常笨拙，因为这种方法不会自动对fgprop属性中的更改做出反应。CSS似乎是实现这一点的最佳场所，因为它是一种仅用于表示的级别转换

---

有办法做到这一点吗？（现在我只针对webkit，所以某种特定于webkit的扩展将适用于我的用例，如果这很重要的话）。提前谢谢

这种情况不正是内联样式的用途吗：

<span style="color:#ff0000">Some Text</span>
<span style="color:#00ff00">Other</span>

一些文本
其他

---

如果您要将颜色指定为单个元素的属性，为什么要让样式表尝试引用回fgprop属性，从而使其过于复杂？样式属性同样容易在服务器端生成，也同样容易在客户端更新。

这种情况不正是内联样式的用途吗：

<span style="color:#ff0000">Some Text</span>
<span style="color:#00ff00">Other</span>

一些文本
其他

---

如果您要将颜色指定为单个元素的属性，为什么要让样式表尝试引用回fgprop属性，从而使其过于复杂？样式属性同样容易在服务器端生成，也同样容易在客户端更新。

您是否尝试过

attr（fgprop，color）

？是的，我尝试过，但它也不起作用。您要问的是CSS3中的一个假定新功能（在CSS2.1中，您只能检索字符串），但是我找不到任何关于新版本是否在任何浏览器中都受支持的文档。我只能找到解释它用途的答案。很可能，它还不受支持。是的，即使Chrome16也不支持CSS 3版本。顺便说一句，所有自定义属性的前缀都必须是

data-

。您是否尝试过

attr（fgprop，color）

？是的，我尝试过，但它也不起作用。您要问的是CSS3中一个假定的新功能（在CSS2.1中，您只能检索字符串），但是我找不到任何关于新版本是否在任何浏览器中都受支持的文档。我只能找到解释它用途的答案。很可能，它还不受支持。是的，即使Chrome16也不支持CSS 3版本。顺便说一下，所有自定义属性的前缀都必须是

data-

。

<span style="color:#ff0000">Some Text</span>
<span style="color:#00ff00">Other</span>