仅使用CSS隐藏具有相同类别的特定图像

Question

我有一个包含2个图标的页面，我需要隐藏其中一个。问题是图像都有相同的类，所以我不能简单地使用.color_box {display:none;}，因为在这种情况下，两个图像都将被隐藏。这两个图像之间的唯一区别是它们自己的标题标签，所以我想知道是否可以用这个做点什么。这是一个代码示例：

<img title="Annotation" class="color_box" src="http://www.site.com/images1.png">

<img title="Reservation" class="color_box" src="http://www.site.com/images2.png">

精度：

• 我无法访问相关网页的HTML
• 我只允许通过修改全局样式表文件来使用CSS
• 无法使用Javascript

有什么建议吗？

Answer 1

您可以使用attribute selectors。他们一直回到IE7。

img[title="Annotation"], img[src$="images2.png"] { display: none }

正如@Jon所说，这完全取决于HTML，所以如果它发生变化，你就会被搞砸了。我添加src属性只是为了说明它也是可能的。

Answer 2

您可以使用attribute value selector仅定位一张图片：

img[title=Annotation] { display: none; }

如果HTML在没有警告的情况下发生变化，这很容易破坏，但考虑到你给出的限制，没有更好的选择。