选择所有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中对此进行测试，以确保它已被选中。