该:
是CSS标识符的特殊字符,它代表了一个开始伪类选择一样:hover
,:first-child
等你将需要转义。
#phoneForm\:phoneTable {
background: pink;
}
这仅在IE6 / 7中不起作用。如果您也想支持这些用户,请\3A
改用(后面有空格!)
#phoneForm\3A phoneTable {
background: pink;
}
以上适用于所有浏览器。
<h:form id="phoneForm">
<div id="phoneField">
<h:dataTable id="phoneTable">
与
#phoneField table {
background: pink;
}
<h:dataTable id="phoneTable" styleClass="pink">
与
.pink {
background: pink;
}
要么
table.pink {
background: pink;
}
另一个优点是,这允许更多的抽象自由。当您想在另一个元素上重用相同的属性时,CSS可在多个元素上重用,而无需添加选择器和/或copypaste属性。
<context-param>
<param-name>javax.faces.SEPARATOR_CHAR</param-name>
<param-value>-</param-value>
这样的分隔符变得-
代替:
。
#phoneForm-phoneTable {
background: pink;
}
缺点是您需要确保不要在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加上前缀。