在 GWT 中使用带有 UiBinder 的 nth-child CSS 选择器答案

【问题标题】：Using nth-child CSS selector with UiBinder in GWT在 GWT 中使用带有 UiBinder 的 nth-child CSS 选择器
【发布时间】：2010-12-02 23:20:10
【问题描述】：

在我的网络应用程序中，我想要一个表格，其中每隔一行都用不同的背景着色。我正在使用 GWT，所以在我的 UiBinder 文件中我有一些这样的样式信息：

<ui:style> 
  .productlist { 
    cursor: pointer; 
    width: 50em; 
    padding: 10px 10px 0px 10px; 
  }

  .productlist tr:nth-child(even) { 
    background-color: silver; 
  }
</ui:style>

我相信这是正确的 CSS，因为它适用于浏览器。但是，在开发模式下运行应用程序时，我收到一个崩溃，提示无法解释 CSS。如果我将“偶数”替换为“5”，则会收到一条错误消息，提示 Uibinder 需要。

之前有没有人在 GWT 中使用过 nth-child CSS 选择器？

【问题讨论】：

n-th child 是 CSS 3 的一部分。它在 IE 8 和更早版本中不可用。见this overview。 GWT 也尝试与 IE 兼容，因此这并不适用。不过，如果有解决方法会很好（我认为literal function 不会在这里工作。）
在 z00bs 的回答中列出的问题中，有一个解决方法，但它不起作用。我想真正的解决方法是以编程方式将样式添加到每一行。

标签： gwt css-selectors

【解决方案1】：

这是known issue。

您可以通过转义括号来解决此问题，以避免混淆可怜的 GWT CSS 解析器：

.productlist tr:nth-child\(even\) { 
    background-color: silver; 
}

【讨论】：