Question

我正在尝试使用CSS attr()来更改伪:before元素的背景颜色。

<ul>
    <li data-color="#ff0000">R</li>
    <li data-color="#00ff00">G</li>
    <li data-color="#0000ff">B</li>
</ul>

这是CSS

ul {
    list-style: none;
}
li:before {
    background-color: attr(data-color, color);
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
}

但是，根据data-color属性，before元素不显示背景颜色。

但是当我添加这个CSS

时

li:after {
    content: attr(data-color);
}

:after元素将data-color属性内容显示为内容。

这是JS小提琴http://jsfiddle.net/b7Rve/

我做错了什么？

更新

我刚刚在Mozilla developer docs重读了color。它说color类型是实验性的。我想我仍然需要等到它被释放。

Answer 1

请查看另一个帖子Setting width with CSS attr()。

简而言之：“根据Mozilla Developer Network的文档，只与CSS内容属性[...]兼容，但不能（还）用于为其他属性生成值。”

2016年5月16日更新：

现在看Mozilla Developer Network's documentation是可能的，但要谨慎：

attr（）函数可以与任何CSS属性一起使用，但支持内容以外的属性是实验性的。

所以，实际上你可以使用它，但肯定浏览器的支持，尽管比过去更好，仍然只是罕见的和实验性的。

Answer 2

You can set color attributes with conditions like this one

http://jsfiddle.net/vijay1989/kwvokxsx/6/

使用CSS attr（）更改伪：在背景颜色之前

2 个答案: