attr as property in css selector [duplicate]

问题

This question already has answers here:

Closed 7 years ago.

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?

回答1:

Try this code:

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

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

JSFIDDLE

回答2:

You can use the following:

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

But I don't believe there's any way to use an attribute as a property without some JavaScript

回答3:

You cannot achieve what you ask about in pure CSS. Using jQuery it could be done this way:

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

Check this DEMO.

来源：https://stackoverflow.com/questions/12895374/attr-as-property-in-css-selector