0

我需要在无法访问 html 但可以修改 CSS 文件的页面中隐藏3 个图标。

html代码是：

 <img class="color_box" title="Annotations" src="http://www.site.com/images/notice.png">

 <span class="with_tooltip" title="This is a message"></span>

 <img class="color_box with_tooltip" style="background-color:#FFFFFF;" src="images/clear.gif" title="White">

我尝试了不同的组合，例如：

.color_box with_tooltip{
    display:none;
}

或者

.color_box, .with_tooltip{
     display:none;
}

但它们都不允许隐藏所有图标。根据我更改代码的方式，有些是隐藏的，有些是隐藏的。

请问有什么建议吗？

4

2 回答 2

4

CSS 规则通过特定级别应用。更具体的规则可以胜过那些不太具体的规则。

所以你可能有这样的风格

#id .yourClass {something...}

那是胜过你的.yourClass声明。

解决此问题的一种方法是使用!important标志。试试这个：

.color_box, .with_tooltip {display:none !important;}

!important 是典型的“最后手段”，因为它可以让未来的 CSS 更新变得痛苦，但它有用的一个地方是，当您必须仅通过 CSS 修改现有站点并且只需要加强一些更改时。

于 2013-06-04T22:35:14.793 回答
0

尝试将 !important 属性添加到上面列出的第二个选择器。可能还有其他样式可以覆盖隐藏。

我创建了一个非常简单的JSFiddle，它可以在不使用 !important 子句的情况下工作。您可以删除 CSS 并再次添加它以查看它的实际效果：

.color_box, .with_tooltip {display: none !important;}
于 2013-06-04T22:42:24.107 回答