图像css max-width的路径异常

Question

目前我有一些简单的css代码，可以将博客中的图像设置为设定的大小，以便移动设备友好。

.BlogContent img {
    max-width:80px;
    max-height:80px;
}

我遇到了一个问题，即表情符号最终也被强制到那个大小，因为它是博客内容中的一个图像，所以它们被强制从16px到80px并且看起来很滑稽。

所以，也许这是一种可怕的方式来解决这个问题，但我想......“嗯，也许我可以为可以使用的表情符号定义路径变量异常吗？”。

是否有人知道不对具有特定根uri的文件应用此强制照片大小的方法？

例如：

http://www.example.com/media/blogimage.png -- does get resized

http://www.example.com/emoticons/mrgreen.png -- does NOT get resized

谢谢！

Answer 1

您可以使用CSS *= attribute selector来匹配部分图片的网址，并结合negation pseudo-class (not())：

.BlogContent img:not([src*="/emoticons/"]) {
    max-width:80px;
    max-height:80px;
}

这会将max-width和min-width应用于img类的.BlogContent类的任何src后代，其{{1}}属性不包含＆＃34 ; /表情符号/＆＃34;