来自 data-* 属性的 CSS 规则答案

【问题标题】：CSS rule from data-* attribute来自 data-* 属性的 CSS 规则
【发布时间】：2012-12-26 18:44:57
【问题描述】：

假设我的 HTML 文件的一部分如下所示：

<div data-w="20px">
    <p>this is some text this is some text this is some text</p>
</div>

并且<div>的宽度应该等于data-w，如下图。

div { width:[data-w]; }

我知道我可以使用[attribute] 作为选择器，但老实说，这不是替代方案：

div[data-w=1px]{ width:1px; }
div[data-w=2px]{ width:1px; }
div[data-w=3px]{ width:1px; }
div[data-w=4px]{ width:1px; }
div[data-w=5px]{ width:1px; }
div[data-w=1px]{ width:1px; }
div[data-w=1px]{ width:1px; }
        (...)

想法？

编辑

我找到了possible duplicate

【问题讨论】：

您希望<div data-w="20px"> 成为20px 吗？如果是，那么没有属性选择器就无法做到
@Mr.Alien 是的，但我可能会用data-w=另一个值创建另一个<div>。
是的，你为什么不想选择属性选择器？有什么具体原因吗？
有width: attr(data-w px)，但仍处于试验阶段。但是，在我看来，这会打破内容和演示之间的分离。
如果您可以使用data-w="20px" 生成HTML，为什么不使用style="width:20px;" 生成HTML？

标签： css html attributes

【解决方案1】：

我想最简单的方法是使用 jQuery。

Fiddle.

$("div").each(function() {
    var w = $(this).data("w");
    var $this = $(this);

    $this.width(w);
});

正如 cmets 中所说，仅使用 CSS 是不可能做到的。

【讨论】：

接受，因为它不是实验性的，不会搞砸。

【解决方案2】：

我想，因为你是硬编码宽度，最好使用：

<div style="width:20px">
    <p>this is some text this is some text this is some text</p>
</div>

【讨论】：