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

Question

在我的网络应用程序中，我希望有一个表格，其中每一行都用不同的背景着色。我正在使用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。如果我将“even”替换为“5”，我会收到错误消息，说Uibinder预期＆lt; IDENT＆gt ;.

有没有人在之前使用过带有GWT的第n个子CSS选择器？

Answer 1

这是known issue。

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

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