如何将 CSS 中的 HTML 数据属性用作属性？ [复制]

Question

如何使用attr() 选择数据属性并根据值设置各种 CSS 属性？例如，我有这个 jsfiddle http://jsfiddle.net/rh1vfmso/ - 我通过 data-width 设置宽度，然后尝试通过 width: attr(data-width); 设置它

当我将内容设置为属性时它可以工作，但没有别的。如何根据 HTML 属性中设置的内容设置宽度？

<style type='text/css'>
input[type='checkbox']:checked ~ .size:before {
  content: attr(data-width);
  display: block;
  height: 30px;
  background-color: red;
  width: attr(data-width);
  /*width: 100px;*/
}
</style>

<div>    
  <input type='checkbox' id='resize'>
  <label for='resize'>Resize</label>
  <div class="size" data-width=100px></div>
</div>

Answer 1

支持取决于给定浏览器的实现。如果它不起作用，那么它目前不受支持。

根据MDN，对content 以外的属性的支持是实验性的：

attr() 函数可以与任何 CSS 属性一起使用，但对 content 以外的属性的支持是实验性的。