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

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

回答:

:是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>

这样的分隔符变得-代替:

    #phoneForm-phoneTable {

background: pink;

}

缺点是您需要确保不要在id中的任何地方自己使用此字符,因此这是一种非常脆弱的方法。


  1. 仅从JSF 1.2开始:禁用form的前置id
    <h:form prependId="false">

    <h:dataTable id="phoneTable">

这样你就可以使用

    #phoneTable {

background: pink;

}

缺点是<f:ajax>无法找到它,并且被认为是不正确的做法:具有prependId =“ false”的UIForm破坏了<f:ajaxrender>。此属性在所有其他UINamingContainer组件中都不存在,因此您仍然必须以正确的方式处理它们(上面的#1和/或#2)。


在 _您的_特定情况下,我认为将其转换为#2中所述的CSS类是最合适的解决方案。“电话表”似乎并不代表整个网站范围内的唯一元素。真正的网站范围内的唯一元素(例如页眉,菜单,内容,页脚等)通常不包装在JSF表单或其他JSF命名容器中,因此无论如何都不会为它们的ID加上前缀。

以上是 如何在CSS选择器中使用带有冒号“:”的JSF生成的HTML元素ID? 的全部内容, 来源链接: utcz.com/qa/408693.html

回到顶部