使用 JSF 和 PrimeFaces 覆盖/实现 CSS答案

【问题标题】：Override/implement CSS with JSF and PrimeFaces使用 JSF 和 PrimeFaces 覆盖/实现 CSS
【发布时间】：2012-10-11 11:45:37
【问题描述】：

我使用 JSF 和 PrimeFaces，并尝试通过更改或添加一些 CSS 行来修改渲染。

我将名为“styles.css”的 CSS 文件添加到我的 .xhtml 页面，它在 PrimeFaces 之后加载，因此我可以覆盖默认值。

PrimeFaces 在我的页面中创建一个 div：

<div id="j_idt13:universe" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 86px;">
....
</div>

我正在尝试将 86px 大小更改为 100%，所以在我的 styles.css 中我添加了：

#j_idt13:universe{
    width: 100%;    
}

但它不起作用...当我检查源代码时使用 Firebug，我的 #j_idt13:universe 不会出现在任何地方...

我可以通过访问类选择器（.class）来更改一些 CSS，但不能使用 id 选择器（#id）。

在我的情况下，请问如何将 86px 更改为 100%？

谢谢

奥利维尔

【问题讨论】：

【解决方案1】：

冒号: 是CSS selectors 中的一个特殊字符，表示伪选择器的开始。如果您想将冒号从字面上表示为元素 ID 或类名的一部分，则必须使用 \ 对其进行转义。

#j_idt13\:universe {

}

请注意，这在 IE6/7 中不起作用。您需要改用\3A （带有尾随空格）。

#j_idt13\3A universe {

}

另外请注意，当您将另一个 JSF 组件添加到视图时，这将失败，因为j_idt13 是一个自动生成的 ID，取决于组件在视图中的位置，而不是固定 ID。而是给父组件UINamingContainer 一个固定的ID，或者更好的是，给目标组件一个样式类，这样你就可以使用类选择器了。

【讨论】：