Question

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

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

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

我尝试通过#phoneTable { ... }设置CSS，但它不起作用。检查客户端的HTML源代码后，就会出现这种情况 JSF生成的HTML表以id="phoneForm:phoneTable"的形式获取客户端ID。我不能通过#phoneForm:phoneTable { ... }应用CSS，因为冒号表示伪选择器的开始并导致错误。

我怎样才能在CSS选择器中使用它？

Answer 1

:是CSS标识符中的特殊字符，它表示pseudo class selector的开头，如:hover，:first-child等。您需要将其转义。

#phoneForm\:phoneTable {
    background: pink;
}

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

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

以上适用于所有浏览器。

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

只需将其包装在纯HTML元素中，然后通过它将样式包装起来。

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

与

#phoneField table {
    background: pink;
}

使用class代替id。 E.g。
```
<h:dataTable id="phoneTable" styleClass="pink">
```
与
```
.pink {
    background: pink;
}
```
或
```
table.pink {
    background: pink;
}
```
另外一个优点是，它允许更多的抽象自由度。当你想在另一个元素上重用相同的属性时，CSS可以在多个元素上重用，而无需添加选择器和/或copypaste属性。
仅限JSF 2.x：通过UINamingContainer中的以下上下文参数更改JSF默认web.xml分隔符。 E.g。
```
<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>
```
以便分隔符变为-而不是:。
```
#phoneForm-phoneTable {
    background: pink;
}
```
缺点是您需要确保不在ID中的任何位置使用此角色，因此这是一种非常脆弱的方法。
仅限JSF 1.2：禁用id格式的前置。
```
<h:form prependId="false">
    <h:dataTable id="phoneTable">
```
以便您可以使用
```
#phoneTable {
    background: pink;
}
```
缺点是<f:ajax>无法找到它并且被认为是不良做法：UIForm with prependId="false" breaks <f:ajax render>。所有其他UINamingContainer组件中都不存在此属性，因此您仍需要以正确的方式处理它们（上面的＃1和/或＃2）。

在你的特定情况下，我认为将其转换为＃2中描述的CSS类是最合适的解决方案。 “电话表”似乎并不代表网站范围内的独特元素。真正的网站范围内的独特元素（如标题，菜单，内容，页脚等）通常不包含在JSF表单或其他JSF命名容器中，因此它们的ID无论如何都不会被添加前缀。

另见：

Answer 2

<h:form prependId="false">

如果您使用

，则无效

<h:commandButton>
tag

如何在CSS选择器中使用JSF生成的带有冒号“：”的HTML元素ID？

2 个答案:

另见：