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

问题描述

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

 < h：form id =phoneForm> 
< h：dataTable id =phoneTable> 
 
< / h：dataTable> 
< / h：form> 
 

生成的HTML表以形式获取客户端ID phoneForm：phoneTable 。我不能对这个ID应用CSS，因为冒号表示伪选择器的开始。

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

解决方案

：是CSS标识符中的特殊字符， a href =http://www.w3.org/TR/css3-selectors/#pseudo-classes>伪类选择器，例如：hover ， ：first-child 等，你需要逃脱它。

 ＃phoneForm\：phoneTable {
 background：pink; 
} 
  

这在IE6 / 7中不起作用。如果您也想支持这些用户，请改用 \3A （后面有尾随空格）。

 ＃phoneForm\3A phoneTable {
 background：pink; 
} 
  

以上适用于所有浏览器。

---

还有其他几种解决方法：

1.  < h：form id =phoneForm> 
   < div id =phoneField> 
   < h：dataTable id =phoneTable> 
     

   与

     #phoneField表{
    background：pink; 
   } 
     

   
   
   

   ---


class 而不是 id 。例如

 < h：dataTable id =phoneTablestyleClass =pink> 
  

与

  .pink {
 background：pink; 
} 
  

或

  table.pink {
 background：pink;另外的优点是，这允许更多的抽象自由。当您要在其他元素上重复使用相同的属性时，CSS可以在多个元素上重复使用，而无需添加选择器和/或copypaste属性。
 
 
 
  
 
 
由于仅JSF 2.x：通过中的以下上下文参数更改JSF默认 UINamingContainer  web.xml 。例如
 < context-param> 
< param-name> javax.faces.SEPARATOR_CHAR< / param-name> 
< param-value>  - < / param-value> 
< / context-param> 
  
因此，分隔符变为  -  的：。 
 ＃phoneForm-phoneTable {
 background：pink; 
} 
  
缺点是您需要确保不要使用此字符
 
 
 
 
 
 
 
由于仅限JSF 1.2：禁用前置 id 。
  h：form prependId =false> 
< h：dataTable id =phoneTable> 
  
，以便您可以使用
  #phoneTable {
 background：pink; 
} 
  
缺点是< f：ajax& / code>将无法找到它，它被认为是不好的做法： UIForm with prependId =false break< f：ajax render> 。此属性在所有其他 UINamingContainer 组件中不存在，因此您仍然必须以正确的方式处理它们（上面的＃1和/或＃2）。
 
 
 
 
 
 

在它到＃2中描述的CSS类是最合适的解决方案。 电话表，似乎不表示网站范围内唯一的元素。真正的网站范围内的唯一元素，例如标题，菜单，内容，页脚等通常不会包装在JSF表单或其他JSF命名容器中，因此它们的ID不会被前缀。

另请参阅：

• 如何使用jQuery选择JSF组件？


• >

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

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

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

The generated HTML table gets a client ID in form of phoneForm:phoneTable. I can't apply CSS for this ID, because the colon indicates the start of a pseudoselector.

How can I use it anyway in CSS selectors?

解决方案

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;
}

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!)

#phoneForm\3A phoneTable {
    background: pink;
}

Above works in all browsers.

---

There are several other ways to solve this:

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">
   

   with

   #phoneField table {
       background: pink;
   }
   

   ---

2. Use class instead of id. E.g.

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

   with

   .pink {
       background: pink;
   }
   

   or

   table.pink {
       background: pink;
   }
   

   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).

   ---

3. 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;
   }
   

   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.

   ---

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

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

   so that you can use

   #phoneTable {
       background: pink;
   }
   

   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>. 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).

   ---

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.

See also:

• How to select JSF components using jQuery?
• By default, JSF generates unusable ids, which are incompatible with css part of web standards

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