css - 使用 CSS 隐藏具有 3 个不同类的 3 个图标

Question

我需要在无法访问 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;
}

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

有什么建议吗？

Answer 1

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

所以你可能有这样的风格

#id .yourClass {something...}

这胜过你单独的 .yourClass 声明。

解决这个问题的方法是使用 !important 标志。试试这个:

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

!important 是典型的“最后手段”，因为它会让 future 的 CSS 更新变得很痛苦，但它有用的地方是当您必须仅通过 CSS 修改现有站点并且只需要强力武装您的一些变化。