我正在尝试使用我的css中的数据属性为不同的元素添加颜色但是不起作用……
我按照这个说明操作：
The attr() Function: Properties Values Collected from the Edited Document.
HTML
<table>
<tr>
<td>
<span class="bgborder" data-color="#e7663f"></span>
<i class="fa fa-copy"></i>
</td>
<td>
<span>Blaablaaablaaa</span>
</td>
</tr>
</table>
<table>
<tr>
<td>
<span class="bgborder" data-color="#77c385"></span>
<i class="fa fa-upload fa-fw"></i>
</td>
<td>
<span>Blablaablaaa</span>
</td>
</tr>
</table>
CSS
.bgborder {
display: block;
width: 5px;
height: 100%;
position: absolute;
top: 0;
background-color: attr(data-color color);
}
什么都没有出现……我是对的吗？
在我的chrome检查员中,我有这个：
background-color: attr(data-color color); /!\ Invalid property value
我不明白为什么…… ???
谢谢你的帮助 ：)
解决方法
阅读文档总是一个好主意：
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}
如您所见,这允许灵活性,例如定义您自己的颜色;)
