创建仅适用于png或jpg格式的IMG标签的CSS规则

Posted 2023-02-23

我想创建一个将规则应用于img标签的CSS规则，但前提是src属性指向jpg图片。 png格式的图像应从此规则中排除，我不想使用javascript。

[属性选择器是我开始寻找的地方，但是它仅在可以指定整个属性的值时才应用样式，并且无助于将样式应用于所有具有.jpg扩展名的图像。

img[src="https://example.com/image.jpg"] 
  box-shadow: 0 0 30px 0px #636363;

我可以将其扩展为仅应用基于图像扩展名的规则吗？

答案

我设法弄清楚如何通过在等号之前添加美元符号来解决我的问题。

img[src$=".png"] 
  box-shadow: 0 0 30px 0px #636363;

这基本上是告诉浏览器将样式应用于src标签以.png结尾的任何图像。

我用更多的examples of using CSS3 attribute values here写了这个。