Primefaces 组件 CSS 自定义 [英] Primefaces components CSS customization

问题描述

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

As I see in the primefaces documentation,

    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要写三次?

对于 tabView 的两个不同实例，我想以不同的方式自定义其标题背景颜色，但我找不到方法来做到这一点.这可能吗?

For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?

推荐答案

在样式声明中，它们用逗号分隔不同类覆盖的列表.特别是这段css声明:

In the style declaration they are comma delimiting the list of different class overrides. Specifically this piece of css states:

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

Classes ui-widget and ui-widget child elements of an element that has the class ui-widget.

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

As far as the header background is considered you might not have luck using simple CSS to modify the background color as I believe that it is likely using various different 1px wide GIF or JPG images repeated as opposed to a solid contiguously declared color.

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

If you want to customize the default themes of the Primefaces components with your own stylesheets then you are best to look into a tool like Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ for inspecting classes, styles and modifying them real time on ANY web page that Firefox is currently viewing. It even has built in Javascript debugging.

这篇关于Primefaces 组件 CSS 自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！