通过CSS隐藏特定大小的图像

Question

提前感谢您的帮助！

我有一个RSS，我想在我的页面上发布这个RSS的内容，但这个RSS来自WordPress，它包含一个按钮的图像来进行评论。

问题1：如果我从RSS中隐藏每个<img>，我也会从博客中隐藏文章上发布的图像。

问题2：评论按钮<img>的URL是连续的，所以即使我可以隐藏"wordpress.com/comments/…12"，下一个按钮<img>的URL也是"wordpresscom/comments/…13"，依此类推：（

图像的HTML：

<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/mulleralc.wordpress.com/35/">

有一种方法可以识别评论按钮图像：它是72px乘16px。所以，我需要隐藏页面上的每一张72（宽）x 16（高）的图片。有没有一种方法可以在CSS或JavaScript中做到这一点？

既然我们有这样的编码：

img[src~="http://...url..."] {display: none;}    

也许有这样的东西：

img[height="16"] {display: none;}

Answer 1

评论按钮的URL是连续的，所以即使我可以隐藏"wordpress.com/commentbutton/12"，下一个按钮的URL也是"wordpress.com/scommentbutton/13"，依此类推：（

CSS实际上可以在这里提供帮助。属性选择器可以选择包含值的属性。所以，这个：

img[src*="feeds.wordpress.com/1.0/comments"] {display: none;}

应该这样做。

Answer 2

我建议使用多个属性选择器，在这种情况下，将以下代码添加到CSS样式表中：

img[width="72"][height="16"] {
    display: none;
}

这种方法唯一的问题是它在旧的浏览器（例如IE 6）中不起作用，因为它们无法识别它们。

如果您使用的是JavaScript库jQuery，您可以使用以下脚本：

$('img').each(function () {
    'use strict';
    var img = $(this);
    if (img.width() === 72 && img.height() === 16) {
        img.hide();
    }
});

Answer 3

使用多个属性选择器。

您的图像标签必须使用width和height属性才能工作。

HTML

<img src="your-image.jpg" width="72" height="16" />

CSS

img[width="72"][height="16"] {
     display: none;
}

或

如上所述，使用CSS类。

HTML

<img class="hide-from-rss" src="your-image.jpg" width="72" height="16" />

CSS

.hide-from-rss {
     display: none;
}

Answer 4

CSS无法做到这一点。它不知道你的页面上有多大的图像。你需要JavaScript来解决这个问题。