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;
         }

我有两个问题：

为什么.ui-widget在上面的代码中写了三次？
对于tabView的两个不同实例，我想以不同方式自定义其标题背景颜色，但我找不到这样做的方法。这甚至可能吗？

Answer 1

在样式声明中，它们以逗号分隔不同类覆盖的列表。特别是这段css表示：

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

考虑到标题背景，您可能没有运气使用简单的CSS来修改背景颜色，因为我相信它可能会使用各种不同的1px宽GIF或JPG图像重复而不是固定连续声明的颜色。

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

Answer 2

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

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

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

XHTML：

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

的CSS：

.myClass {
   background-color: yellow;
}

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

Answer 3

也许有点主观，但除非你想在预先存在/预先推出的Primefaces主题中定制现有的Jquery UI ID，否则你有点隐藏。例如，PanelGroups，PanelGrids和TabViews破坏了它们的容器，甚至没有溢出：auto可以修复它。

关于Primefaces库最令人信服的事情之一是组件如何不通过W3C验证，导致数小时的“打击框架”。

Primefaces组件CSS自定义

3 个答案: