css - attr as property in css selector

Question

Possible Duplicate:
CSS selector by style attribute

html:

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

in css i want to use this family value. Example:

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

Family can be any string. How make it work?

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);
    })
})​

检查这个演示。

Answer 3

您可以使用以下内容：

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

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