49

我一直在使用 JSF 处理一个简单的 Java EE 项目。

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

我尝试通过 设置 CSS #phoneTable { ... }，但它不起作用。在客户端检查 HTML 源代码后，似乎 JSF 生成的 HTML 表获得了一个客户端 ID，格式为id="phoneForm:phoneTable". 我不能通过 应用 CSS #phoneForm:phoneTable { ... }，因为冒号表示伪选择器的开始并导致错误。

我如何在 CSS 选择器中使用它？

4

2 回答 2

84

是 CSS 标识符中的:一个特殊字符，它表示伪类选择器的开始，如:hover,:first-child等。您需要对其进行转义。

#phoneForm\:phoneTable {
    background: pink;
}

这仅在 IE6/7 中不起作用。如果您也想支持这些用户，请\3A改用（后面有一个尾随空格！）

#phoneForm\3A phoneTable {
    background: pink;
}

以上适用于所有浏览器。

还有其他几种方法可以解决这个问题：

  1. 只需将其包装在一个普通的 HTML 元素中，并通过它来设置样式。

     <h:form id="phoneForm">
     <div id="phoneField">
         <h:dataTable id="phoneTable">

    和

     #phoneField table {
     background: pink;
 }

  2. 使用class而不是id. 例如

     <h:dataTable id="phoneTable" styleClass="pink">

    和

     .pink {
     background: pink;
 }

    或者

     table.pink {
     background: pink;
 }

    另一个优点是这允许更多的抽象自由。当您想在另一个元素上重用相同的属性时，CSS 可以在多个元素上重用，而无需添加选择器和/或复制粘贴属性。

  3. UINamingContainer仅从 JSF 2.x 开始：通过以下上下文参数更改 JSF 默认分隔符web.xml。例如

     <context-param>
     <param-name>javax.faces.SEPARATOR_CHAR</param-name>
     <param-value>-</param-value>
 </context-param>

    这样分隔符就变成-了，而不是:.

     #phoneForm-phoneTable {
     background: pink;
 }

    缺点是您需要确保自己不会在 id 中的任何地方使用此字符，因此这是一种非常脆弱的方法。我不推荐这种方法。这是一个不好的做法。

  4. 仅从 JSF 1.2 开始：禁用表单的前置id。

     <h:form prependId="false">
     <h:dataTable id="phoneTable">

    这样你就可以使用

     #phoneTable {
     background: pink;
 }

    缺点是<f:ajax>无法找到它并且被认为是不好的做法：带有 prependId="false" 的 UIForm 会破坏 <f:ajax render>。我不推荐这种方法。这是一个不好的做法。此外，此属性并不存在于所有其他UINamingContainer组件中，因此您仍然必须以正确的方式处理它们（上面的#1 和/或#2）。

在您的特定情况下，我认为将其转换为 #2 中所述的 CSS 类是最合适的解决方案。“电话表”似乎并不代表整个网站的独特元素。真正的网站范围内的唯一元素，例如页眉、菜单、内容、页脚等，通常不包含在 JSF 表单或其他 JSF 命名容器中，因此它们的 ID 无论如何都不会作为前缀。

也可以看看：

于 2011-05-04T11:14:32.093 回答
0 
<h:form prependId="false">

如果您使用的是

<h:commandButton>
tag
于 2012-04-24T03:50:43.310 回答