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

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

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

    </h:dataTable>
</h:form>

我尝试通过设置 CSS#phoneTable { ... }，但是它不起作用。检查客户端的 HTML 源代码后发现： JSF 生成的 HTML 表获取以下形式的客户端 IDid="phoneForm:phoneTable"。我无法通过以下方式应用 CSS#phoneForm:phoneTable { ... }，因为冒号表示伪选择器的开始并导致错误。

我如何在 CSS 选择器中使用它？

The :是 CSS 标识符中的一个特殊字符，它代表一个字符的开始伪类选择器 http://www.w3.org/TR/css3-selectors/#pseudo-classes like :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">
   

   with

    #phoneField table {
        background: pink;
    }
   

   ---

2. Use class代替id. E.g.

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

   with

    .pink {
        background: pink;
    }
   

   or

    table.pink {
        background: pink;
    }
   

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

   ---

3. 仅自 JSF 2.x 起：更改 JSF 默认值UINamingContainer由以下上下文参数分隔web.xml. E.g.

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

   这样分隔符就变成了-代替:.

    #phoneForm-phoneTable {
        background: pink;
    }
   

   缺点是您需要确保自己不会在 ids 中的任何地方使用该字符，因此这是一种非常脆弱的方法。我愿意not推荐这种方法。这是一个不好的做法。

   ---

4. 仅自 JSF 1.2 起：禁用表单的前置id.

    <h:form prependId="false">
        <h:dataTable id="phoneTable">
   

   这样你就可以使用

    #phoneTable {
        background: pink;
    }
   

   缺点是<f:ajax>将无法找到它，并且这被认为是不好的做法：UIForm 与 prependId="false" 中断 https://stackoverflow.com/questions/7415230/uiform-with-prependid-false-breaks-fajax-render. I do not推荐这种方法。这是一个不好的做法。而且，这个属性并不存在于所有其他的UINamingContainer组件，所以你仍然必须以正确的方式处理它们（上面的#1和/或#2）。

   ---

In your具体情况，我认为将其转换为#2 中描述的 CSS 类是最合适的解决方案。 “电话表”似乎并不代表网站范围内的独特元素。真正的网站范围内的唯一元素（例如页眉、菜单、内容、页脚等）通常不会包装在 JSF 表单或其他 JSF 命名容器中，因此它们的 ID 无论如何都不会添加前缀。

也可以看看：

• 如何使用 jQuery 选择 JSF 组件？ https://stackoverflow.com/questions/7927716/how-to-select-jsf-components-using-jquery
• 默认情况下，JSF 生成不可用的 ID，这些 ID 与 Web 标准的 CSS 部分不兼容 https://stackoverflow.com/questions/10726653/by-default-jsf-generates-unusable-ids-which-are-incompatible-with-css-part-of/