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

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

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

我试图通过#phoneTable { ... }设置CSS，但它不起作用。 在检查客户端的HTML源代码后，看起来JSF生成的HTML表格以id="phoneForm:phoneTable"forms获取客户端ID。 我无法通过#phoneForm:phoneTable { ... }来应用CSS，因为冒号表示#phoneForm:phoneTable { ... }的开始并导致错误。

我怎样才能在CSSselect器中使用它？

Answer 1

:是CSS标识符中的一个特殊字符，它表示伪类select器的开始，如: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可以在多个元素上重用，而不需要添加select器和/或复制粘贴属性。

   ---

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

    <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>将无法find它，这被认为是不好的做法： 与prependId =“假”UIForm中断<f：ajax呈现> 。 所有其他UINamingContainer组件中都不存在此属性，因此您仍然需要以正确的方式处理它们（上面的＃1和/或＃2）。

   ---

在你的具体情况下，我认为把它变成一个如＃2所述的CSS类是最合适的解决scheme。 “电话桌”似乎并不代表整个网站的独特元素。 真正的网站范围的独特元素，如标题，菜单，内容，页脚等通常不包含在JSF表单或其他JSF命名容器中，所以它们的ID不会以前缀为前缀。

也可以看看：

• 如何使用jQueryselectJSF组件？
• 默认情况下，JSF生成不可用的ID，这与Web标准的CSS部分不兼容

Answer 2

 <h:form prependId="false"> 

如果您正在使用a，则不起作用

 <h:commandButton> tag