html带冒号的标签,如何在CSS选择器中使用带有冒号“：”的JSF生成的HTML元素ID？...

小编典典

该:是CSS标识符的特殊字符，它代表了一个开始伪类选择一样:hover，:first-child等你将需要转义。

#phoneForm\:phoneTable {

background: pink;

}

这仅在IE6 / 7中不起作用。如果您也想支持这些用户，请\3A改用(后面有空格！)

#phoneForm\3A phoneTable {

background: pink;

}

以上适用于所有浏览器。

还有其他几种方法可以解决此问题：

只需将其包装在纯HTML元素中，然后通过它样式即可。

与

#phoneField table {

background: pink;

}

使用class代替id。例如

与

.pink {

background: pink;

}

要么

table.pink {

background: pink;

}

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

自仅JSF 2.x起：UINamingContainer通过在中的以下上下文参数更改JSF默认分隔符web.xml。例如

javax.faces.SEPARATOR_CHAR

-

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

#phoneForm-phoneTable {

background: pink;

}

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

仅从JSF 1.2开始：禁用form的前置id。

这样你就可以使用

#phoneTable {

background: pink;

}

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

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

2020-05-16