我正在尝试使用我的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}
如您所见,这允许灵活性,例如定义您自己的颜色;)
