CSS @media img [数据]不起作用？

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中出错，它表示＆＃34;无效的属性值＆＃34; 。屏幕截图：

会发生什么以及它为什么不起作用？

Answer 1

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

  

':: before'和':: after'伪元素用于在元素（或其他伪元素）的内容之前和之后立即插入内容。 'content'属性用于指定要插入的内容。

1. 只是提醒（可能无关紧要）。 <img>不能拥有:before / :after个伪元素（根本不能包含后代元素）。