javascript - CSS 的数据属性没那么有用？

Question

我错过了什么吗？乍一看，这个 MDN 示例非常有用:

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

但这与使用有点不同

article[myAttr='3']{...，或 article.cols3{...

使用 javascript/jQuery 可以很容易地操作其中任何一个。

非常强大的是:

article[data-fieldwidth]{
 width: data-fieldwidth;
}   

但这在任何地方都没有描述，并且在我的任何测试中都不起作用。对吗？

Answer 1

如果你想获得一个属性的值，你应该使用 CSS attr功能。目前该属性的值未被评估，而是按原样设置。

article[data-fieldwidth] {
 width: attr(data-fieldwidth);
} 

但请注意:

The attr() function can be used with any CSS property, but support for properties other than content(property) is experimental.