CSS @media img [data] 不起作用？

Question

我针对不同的屏幕分辨率运行此 img 代码

<img src="http://subtlepatterns.com/patterns/grey_wash_wall.png"
data-src-400px="http://subtlepatterns.com/patterns/dark_wood.png"
alt="">

@media (min-width: 400px) {
   img[data-src-400px] { 
      content: attr(data-src-10px, url); 
   }
}

http://codepen.io/anon/pen/qEqbbQ

但它在我的 chrome 中给出了一个错误，它说“无效的属性值”。截图:

发生了什么，为什么它不起作用？？

Answer 1

1. content仅适用于伪元素。 SPEC

The '::before' and '::after' pseudo-elements are used to insert content immediately before and immediately after the content of an element (or other pseudo-element). The 'content' propety is used to specify the content to insert.

1. 只是提醒(可能无关紧要)。 <img>不能有 :before/:after伪元素(它根本不能有后代元素)。