如何在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 via #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;
   }
   

2. 用class而不是id.例如

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

   同

   .pink {
       background: pink;
   }
   

   要么

   table.pink {
       background: pink;
   }
   

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

3. 仅限JSF 2.x:UINamingContainer通过以下上下文参数更改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无论如何都不会被加上前缀.

也可以看看:

• 如何使用jQuery选择JSF组件？
• 默认情况下,JSF生成不可用的ID,这与Web标准的css部分不兼容