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

Question

我一直在使用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选择器中使用它？

Answer 1

该:是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;
}

1. 使用class代替id。例如

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

与

    .pink {
    background: pink;
}

要么

    table.pink {
    background: pink;
}

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

1. 自仅JSF 2.x起：UINamingContainer通过在中的以下上下文参数更改JSF默认分隔符web.xml。例如

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