html - 选择所有 PNG 图像

Question

如何将 CSS 样式仅应用于PNG图像？

.pngImages {opacity:0.75}
.pngImages:hover {opacity:1}

我有很多页面包含重复的PNG文件。如何在不指定 img 的情况下将此类应用于所有这些class="pngImage"...

像这样的东西，但仅适用于 png 图像：

div {background-color:#ddd}

Answer 1

您可以使用属性选择器

img[src$=".png"]

这会选择所有 png 图像

Answer 2

假设您只需要处理<img>标签，而不需要处理背景图像：

img[src$='.png'] {
  background-color: #ddd;
}

这将选择所有 src 属性值以 . 结尾的图像标签.png。

Answer 3

您可以使用[attribute$='value']选择器来做到这一点：

img[src$=".png"] { opacity:0.75; }
img[src$=".png"]:hover { opacity:1; }

Answer 4

我认为您应该能够使用属性选择器1来执行此操作，例如：

img[src$=".png"]{border:2px solid #8c0000;}

您可能需要在 Internet Explorer 中对此进行测试以确保它被拾取。