html - 修改 GWT 应用的 CSS

Question

使用 GWT 网络应用程序，Firebug 表示以下 HTML

<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>

正在使用这个 CSS。

.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
    display: block;
}

我需要写什么 CSS 才能实现 <table>会有风格，display: none ？

我做了 2 次尝试:[编辑 - 更新了 .multi-zone 和 display:none]

.drop-zone .drop-zone-column-66 .multi-zone {
    display: none;
}

和

.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
    display: none;
}

但 Firebug 仍然给我顶部显示的 CSS。

请多多指教。

Answer 1

严格来说，你应该需要的是:

.maximized-gadget .drop-zone.multi-zone {
    display: none;
}

前提是该规则出现在您上面给出的原始规则之后:

.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
    display: block;
}

根据文档其余部分的结构以及您要执行的操作，您可能需要为该规则添加一些特殊性。

您第一次尝试的问题是您的规则将应用于具有 multi-zone 类的元素，该类是 drop-zone-column- 类元素的后代66，它又是 drop-zone 类元素的后代。您想要的是定位一个元素，该元素上设置了所有这三个类，您可以通过链接这些选择器来实现:

.drop-zone.drop-zone-column-66.multi-zone {
    display: none;
}

这应该让你正确(但如果我没记错的话这在旧版本的 IE 中不起作用)。