Question

我想给损坏/错误的图像添加一些额外的CSS：

img:error {
  max-width: 20px;
  max-height: 20px;
}

但这不起作用。有没有办法用纯CSS来做到这一点？是否有img伪选择器？或者甚至更好：一个有效的肮脏黑客？

我环顾四周，但似乎没有人想知道=）

（是的，我知道JS可以做到，我知道如何;不需要提及它。）

Answer 1

CSS规范或草稿中没有办法，但Firefox有一个专有的选择器（伪类）:-moz-broken。它的文档非常简洁，并且“主要供主题开发人员使用”，但它可以用于例如如下：

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

虽然文档说它“匹配代表断开图像链接的元素”，但它实际上匹配了损坏的图像（img元素，其中src属性不引用图像），无论它们是链接与否。据推测，“链接”在这里的确意味着“引用”。

CSS 2.1说：“此规范没有完全定义：替换元素之前和之后的交互（例如HTML中的IMG）。这将在未来的规范中更详细地定义。“但Selectors Level 3（CSS3选择器）只是说明了它们：”它们在CSS 2.1中进行了解释。“在实践中，浏览器以不同的方式处理它们。奇怪的是，Firefox支持:-moz-broken:after但忽略:-moz-broken:before。它不支持普通图像的这些伪元素，但是对于损坏的图像也支持img:after（即，指定的内容出现在alt属性值之后）。

Answer 2

为此，你应该使用alt属性，如果链接被破坏则显示，你也可以设置图像背景：例如：

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

显示图像时将隐藏这些样式。 http://codepen.io/anon/pen/Kxipq 正如你所看到的，我们不会检查断开的链接，但是为盲人，搜索者，无论什么以及一些额外的样式提供替代，有用的结果：）

一些额外的Image alt attribute best practices

Answer 3

没有。 CSS选择器level 2.1或level 3中没有任何内容可以定位这样的图片。

Answer 4

没有没有：错误伪类。这是一个很好的网站，可以全面列出的内容：

http://reference.sitepoint.com/css/css3psuedoclasses

2015年7月编辑/补充：
（谢谢Rudie）

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

是否可以使用CSS检测损坏/未加载（错误）图像？

4 个答案: