attr作为css选择器中的属性

Question

  

可能重复：
  CSS selector by style attribute

HTML：

<div data-family='arial'></div>

在css中我想使用这个家庭价值。例如：

div{font-family: attr(data-family)}

家庭可以是任何字符串。 如何使它工作？

Answer 1

试试这段代码：

 div[data-weight="bold"]{
      font-weight: bold;
    }

http://www.w3.org/TR/selectors/#attribute-selectors

JSFIDDLE

Answer 2

你无法在纯CSS中实现你所要求的。使用jQuery可以这样做：

$.each($('div'), function(i, div) {
    $.each($(this).data(), function(key, val) {
        var realKey = key.replace(/([A-Z]{1})/g, '-$1').toLowerCase();
        $(div).css(realKey, val);
    })
})​

选中DEMO。

Answer 3

您可以使用以下内容：

div[data-weight="bold"] { font-weight: bold; }

但我不相信没有任何方法可以将属性用作没有JavaScript的属性