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 实例，我想以不同的方式自定义其标题背景颜色，但我找不到方法来实现。这是否可能？

- Rajat Gupta

Answer 1

在样式声明中，它们用逗号分隔不同类别的覆盖。具体来说，这段CSS表明：

类ui-widget和类ui-widget的子元素是一个具有类ui-widget的元素。

就标题背景而言，您可能无法使用简单的CSS修改背景颜色，因为我认为它很可能使用各种不同的1像素宽的GIF或JPG图像重复而成，而不是连续声明的实心颜色。

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

- maple_shaft

Answer 2

我想为两个不同的tabView实例分别自定义header background-color，但我无法找到实现方法。这个有可能吗？

像所有其他PrimeFaces组件一样，tabView也有styleClass属性。通过该属性，您可以将自己的CSS样式类分配给tabView实例（或任何其他组件的实例）。

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

xhtml：

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

CSS：

.myClass {
   background-color: yellow;
}  

你可能需要一个更具体的选择器，请阅读有关CSS 优先级的内容。

- Sebi

Answer 3

或许有点主观，但除非您想要在预先存在/预先滚动的Primefaces主题中自定义现有的Jquery UI ID，否则您将会遇到一些困难。例如，PanelGroups、PanelGrids和TabViews会突破它们的容器，即使是overflow:auto也无法修复。

Primefaces库最令人恼火的事情之一是组件不符合W3C验证，导致数小时的“与框架作斗争”。

- 8bitjunkie