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 中给出了一个错误，它说 "invalid property value"。截图：

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

Answer 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.

提醒一下（可能无关紧要）。 <img> 不能有 :before/:after 伪元素（它根本不能有后代元素）。

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

CSS @media img [data] not work?

css

image

media-queries