使用小部件打包css

你是在正确的轨道上 -

CssResource

或UiBinder的内联

<ui:style>

将实现你想要的。关于按类型而不是类的样式元素，它当然可以完成：

<ui:UiBinder>
  <ui:style>
    .myTable tr {
      color: red;
    }
  </ui:style>

  <table class="{style.myTable}">
    <tr><td>A row!</td></tr>
  </table>
</ui:UiBinder>

然而，GWT有理由优先使用显式类名而不是后代选择器：例如，如果你有上面的样式，每次浏览器呈现一个

<tr>

元素时，它必须走向DOM并访问该元素的所有祖先看他们中是否有人有

.myTable

班。如果你的应用程序使用了很多

<tr>

元素（这里的

<div>

会是一个更好的例子），其中大部分都没有

.myTable

祖先，它可能会导致渲染性能明显下降。     

我想，我会使用UiBinder，只给最外面的元素一个类名，如下所示：

<ui:style>
    .outer tr {
        ...
    }
</ui:style>
<div class="{style.outer}">
    ...
      <tr>...</tr>
    ...
</div>

现在你不必为每个tr分配一个类 - 你只需使用选择器“

.outer tr

”，它只适用于标有class属性

{style.outer}

的某个元素中的

<tr>

s（顺便说一下，不一定是

<div>

） 。当然，没有UiBinder，同样的原则也可以。     

好吧我没有真正理解整个问题，也许还没有，但我认为你要求一种方法来“防止你的CSS”特异性 - 我看到其他答案后我现在得到CSS位 大多数建议添加到所有内容的唯一类名（有点矛盾的是CSS术语但是heyho）以确保网站（而不是你的）CSS尽快失败，无论他们的规则有多具体（加权） 但是你可以让你的widget CSS完全独特，也就是说它无法被网站CSS推翻，无论他们的选择器中有多少ID，没有太多的麻烦而没有专门分类一切 例如

#mywidget div {}

可以很容易被网站CSS推翻

#wrapper #content div {}

会这样做 - 你的

div

也是这两个ID的后代，并且因为他们的规则有2个ID而你的那个，你的CSS会丢失 - 不可能猜到网站的每个排列CSS所以最简单的方法是添加所有这些“额外”类以及为什么YUI和Blueprint都是这样 然而，如果你写你的CSS：

#mywidget>div {}

你的可能永远会赢，因为从来没有在他们的CSS中他们的目标可能是你的小部件ID的直接孩子（除非他们选择定制你的，他们可以做的“班级一切”方法也是如此） 所以要防止你的CSS而不添加所有类的类..我假设你的小部件已经有一个独特的iD包装器？然后，如果你还没有内部div包装器，添加一个，它不需要有一个类，但给它一个将在这个技术上放置一个额外的防弹层。 然后用

#mywidget>div.myclass

作为所有规则的前缀，例如

#mywidget>div.myclass td {}

- 站点拥有规则，无论加权多么重要（选择器中的许多ID和类使选择器更加加权），一旦它们无法匹配特定组合，它们就会失败 - 所以你的tr是安全的，不能从站点CSS接管;） 添加一个div或类，搜索并替换你的CSS，为所有东西添加前缀..至于如何打包我不知道