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

但请注意：

  

attr()函数可以与任何CSS属性一起使用，但对content（属性）以外的属性的支持是实验性的。