如何在 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实验阶段。