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功能。目前该属性的值(value)尚未评估，并且按原样设置。

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.