如何使用 JSF 生成的带有冒号“:"的 HTML 元素 ID在 CSS 选择器中? [英] How to use JSF generated HTML element ID with colon ":" in CSS selectors?

查看:28
本文介绍了如何使用 JSF 生成的带有冒号“:"的 HTML 元素 ID在 CSS 选择器中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've been working with a simple Java EE project using JSF.

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

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

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

I tried to set CSS via #phoneTable { ... }, however it doesn't work. Upon inspection of the HTML source in client side, it appears that the JSF-generated HTML table gets a client ID in form of id="phoneForm:phoneTable". I can't apply CSS via #phoneForm:phoneTable { ... }, because the colon indicates the start of a pseudoselector and causes an error.

如何在 CSS 选择器中使用它?

How can I use it anyway in CSS selectors?

推荐答案

: 是 CSS 标识符中的一个特殊字符,它代表一个 伪类选择器:hover, :first-child 等.您需要对其进行转义.

The : is a special character in CSS identifiers, it represents the start of a pseudo class selector like :hover, :first-child, etc. You would need to escape it.

#phoneForm:phoneTable {
    background: pink;
}

这仅在 IE6/7 中不起作用.如果您也想支持这些用户,请改用 3A(后面有一个尾随空格!)

This only doesn't work in IE6/7. If you'd like to support those users as well, use 3A instead (with a trailing space behind!)

#phoneForm3A phoneTable {
    background: pink;
}

以上适用于所有浏览器.

Above works in all browsers.

还有其他几种方法可以解决这个问题:

There are several other ways to solve this:

  1. 只需将它包装在一个普通的 HTML 元素中,并通过它来设置样式.

  1. Just wrap it in a plain HTML element and style via it instead.

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

 #phoneField table {
     background: pink;
 }


  • 使用 class 而不是 id.例如

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

     .pink {
         background: pink;
     }
    

     table.pink {
         background: pink;
     }
    

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

    Additional advantage is that this allows much more abstraction freedom. The CSS is reusable on multiple elements without the need to add selectors and/or copypaste properties when you want to reuse the same properties on another element(s).

    仅从 JSF 2.x 开始:通过 web.xml 中的以下上下文参数更改 JSF 默认的 UINamingContainer 分隔符.例如

    Since JSF 2.x only: change the JSF default UINamingContainer separator by the following context param in web.xml. E.g.

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

    这样分隔符就变成了 - 而不是 :.

    So that the separator character becomes - instead of :.

     #phoneForm-phoneTable {
         background: pink;
     }
    

    缺点是您需要确保自己不会在 ID 中的任何地方使用此字符,因此这是一种非常脆弱的方法.我推荐这种方法.这是一个不好的做法.

    Disadvantage is that you need to ensure that you don't use this character yourself anywhere in the ids and this is thus a very brittle approach. I do not recommend this approach. This is a bad practice.

    仅从 JSF 1.2 开始:禁用表单 id 的前置.

    Since JSF 1.2 only: disable prepending of the form id.

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

    以便您可以使用

     #phoneTable {
         background: pink;
     }
    

    缺点是 <f:ajax> 将无法找到它,这被认为是不好的做法:带有 prependId =false"的 UIForm中断 .我推荐这种方法.这是一个不好的做法.此外,此属性在所有其他 UINamingContainer 组件中都不存在,因此您仍然必须以正确的方式处理它们(上面的 #1 和/或 #2).

    Disadvantage is that <f:ajax> won't be able to find it and that it is considered poor practice: UIForm with prependId="false" breaks <f:ajax render>. I do not recommend this approach. This is a bad practice. Moreover, this attribute does not exist in all other UINamingContainer components, so you still have to deal with them the right way (#1 and/or #2 here above).

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

    In your specific case, I think turning it into a CSS class as described in #2 is the most appropriate solution. A "phone table" namely doesn't seem to represent a website-wide unique element. Real website-wide unique elements such as header, menu, content, footer, etc are usually not wrapped in JSF forms or other JSF naming containers, so their IDs wouldn't be prefixed anyway.

    这篇关于如何使用 JSF 生成的带有冒号“:"的 HTML 元素 ID在 CSS 选择器中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

  • 查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆