html - すべての PNG 画像を選択

Question

PNG画像だけにcssスタイルを適用するにはどうすればよいですか?

.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 でこれをテストして、正しく認識されることを確認する必要がある場合があります。