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

该

:

:hover

:first-child

#phoneForm:phoneTable {    background: pink;}

这仅在IE6 / 7中不起作用。如果您也想支持这些用户，请

3A

#phoneForm3A 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>