2

我想打包一个小部件以轻松包含在任意项目中。我不想要求用户在他们的主机页面中链接到我个人创建的样式表——我只想在他们使用我的代码时神奇地注入 css。

我知道 CssResource 可以朝着这个梦想走一些路，但是在搜索文档之后，我没有找到对自然类型选择器的任何参考。例如，我想为<tr>小部件中的 s 设置样式，而不必为每个小部件添加类名。

这可以通过 GWT 实现吗？GWT 自己的小部件都具有相当彻底的样式，但似乎他们已经为 DOM 中的每个元素添加了一个样式类！

4

3 回答 3

3

你在正确的轨道上 - 一个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祖先，它可能会导致渲染性能显着下降。

于 2011-04-01T19:47:18.850 回答
2

我想，我会使用 UiBinder，并且只给最外层的元素一个类名，像这样：

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

现在您不必为每个 tr 分配一个类 - 您只需使用选择器“ .outer tr”，它仅适用<tr>于标有 class 属性的某些元素中的 s {style.outer}（顺便说一下，不必是 a <div>）。当然，同样的原理在没有 UiBinder 的情况下也适用。

于 2011-04-01T19:41:25.883 回答
0

好的，我并没有真正理解整个问题，也许仍然没有，但我认为您要求一种从特异性“防弹您的 CSS”的方法 - 在看到其他答案后，我现在得到了 CSS 位

大多数人建议将唯一的类名（有点矛盾的是 CSS 术语，但是嘿嘿）添加到所有内容中，以确保站点（而不是您的）CSS 尽快失败，无论他们的规则多么具体（加权）

但是你可以让你的小部件 CSS 完全独一无二，即它不会被站点 CSS 否决，无论它们的选择器中有多少个 ID，不用多费吹灰之力，也无需专门对所有内容进行分类

例如#mywidget div {}，可以很容易地被站点 CSS 否决#wrapper #content div {}-您div也是这两个 ID 的后代，并且由于他们的规则有 2 个 ID 而不是您的 ID，因此您的 CSS 将丢失-不可能猜测站点 CSS 的每个排列，所以最简单的事情是添加所有这些“额外”类以及 YUI 和蓝图为何如此

但是，如果您编写 CSS：#mywidget>div {}您的 CSS 可能总是会赢，因为在他们的 CSS 中，他们所针对的 div 可能不会是您的小部件 ID 的直接子代（当然，除非他们选择自定义您的，他们可以使用'class Everything' 方法）

所以要在不向所有内容添加类的情况下保护你的 CSS .. 我假设你的小部件已经有一个独特的 iD 包装器？那么如果你还没有一个内部 div 包装器，添加一个，它不需要有一个类，但是给它一个会在这个技术上放置一个额外的防弹层。

然后在所有规则前面加上#mywidget>div.myclass例如#mywidget>div.myclass td {}-站点拥有规则，无论权重有多大（选择器中的许多ID和类使选择器权重更大），一旦它们无法匹配该特定组合，它们的规则就会失败-因此您的tr是安全的从网站 CSS 接管 ;)

添加一个 div 或类并搜索并替换您的 CSS 以将前缀添加到所有内容.. 至于如何打包我不知道

于 2011-04-01T20:25:03.683 回答