Primefaces 组件 CSS 定制

Question

正如我在 primefaces 文档中看到的，

    1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class. 
       An example with 12px font size.

        .ui-widget,
        .ui-widget .ui-widget {
               font-size: 12px !important;
         }

我对此有两个问题：

1. 为什么.ui-widget在上面的代码中写了三次？

2. 对于tabView的两个不同实例，我想以不同的方式自定义其 header 背景颜色，但我找不到这样做的方法。 这甚至可能吗？

Answer 1

在样式声明中，它们以逗号分隔不同 class 覆盖的列表。 具体来说，这块 css 状态：

对具有 class ui-widget的元素的ui-widget和ui-widget子元素进行分类。

至于 header 背景被认为是你可能没有运气使用简单的 CSS 来修改背景颜色，因为我相信它可能使用各种不同的 1px 宽 GIF 或 JPG 图像重复而不是连续声明的纯色。

如果您想使用自己的样式表自定义 Primefaces 组件的默认主题，那么您最好查看类似 Firebug 的工具， https://addons.mozilla.org/en-US/firefox/addon/firebug/进行检查类，styles 并在 Firefox 当前正在查看的任何 web 页面上实时修改它们。 它甚至内置了Javascript调试。

Answer 2

对于 tabView 的两个不同实例，我想以不同的方式自定义其 header 背景颜色，但我找不到这样做的方法。 这甚至可能吗？

tabView 与所有其他 PrimeFaces 组件一样具有属性styleClass 。 因此，您可以将自己的 CSS 样式 class 分配给 tabView 实例（或不同组件的任何实例）。

因此，您可以创建两个具有不同背景的样式类 colors。

xhtml:

<p:tabView styleClass="myClass">
   ...
</p:tabView>

css：

.myClass {
   background-color: yellow;
}  

您可能需要更具体的选择器，请阅读css 特异性

Answer 3

也许有点主观，但除非您希望在预先存在/预滚动的 Primefaces 主题中自定义现有的 Jquery UI ID，否则您就有点隐瞒了。 例如，PanelGroups、PanelGrids 和 TabViews 会破坏它们的容器，甚至溢出：auto 都无法修复它。

关于 Primefaces 库的最令人愤怒的事情之一是组件无法通过 W3C 验证，从而导致数小时的“与框架作斗争”。