现在我想更改组件的大小。例如，一个<p:orderList>.它有一个类叫ui-orderlist-list，它在固定的200×200维度的primefaces.css中定义。无论我在我的theme.css做什么，它被这个属性覆盖，没有办法我可以使内容的一部分< p：orderList>更宽的。
我还没有检查其他组件。
任何人都可以告诉我，我该怎么办？
解决方法
你需要确保在PrimeFaces之后加载你的CSS。您可以通过将< h：outputStylesheet>引用< h：body>中的CSS文件而不是< h：head> ;:
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF将自动将样式表重定位到生成的HTML< head>这将确保样式表在PrimeFaces的默认样式之后加载。这样，CSS文件中与PrimeFaces CSS文件完全相同的选择器将优先于PrimeFaces。
您可能还会看到建议，将其放在< f：facet name =“last”>的< h：head>这被PrimeFaces特定的HeadRenderer理解，但是这是不必要的笨拙，当你有自己的HeadRenderer时会崩溃。
了解CSS的特异性
您还需要确保您的CSS选择器至少与特定元素上的PrimeFaces的默认CSS选择器相同。你需要理解CSS Specificity和Cascading and Inheritance rules.例如，如果PrimeFaces默认声明一个样式，如下所示
.ui-foo .ui-bar {
color: pink;
}
并将其声明为
.ui-bar {
color: purple;
}
并且具有class =“ui-bar”的特定元素碰巧具有带有class =“ui-foo”的父元素，那么PrimeFaces将仍然获得优先级，因为这是最具体的匹配！
您可以使用webbrowser开发人员工具来查找确切的CSS选择器。在webbrowser(IE9 / Chrome / Firefox Firebug)中右键点击相关元素，然后选择检查元素即可查看。
部分覆盖
如果你需要覆盖一个特定的组件实例，而不是所有的实例相同的组件，然后添加一个自定义styleClass并钩住它。例如：
<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,.ui-datatable.borderless th
.ui-datatable.borderless td {
border-style: none;
}
不要使用！important
如果你没有按顺序正确加载CSS文件或者想要正确的CSS选择器，你可能会抓住！重要的解决方法。这是平原错误。这是一个丑陋的解决方法，而不是一个真正的解决方案。它只会混淆你的风格规则和自己更长期。 ！important应该只用于覆盖从HTML样式表文件中的HTML元素的样式属性硬编码的值(这反过来也是一个坏的做法，但在一些罕见的情况下，不幸的是不可避免的)。
也可以看看：
> How to reference CSS / JS / image resource in Facelets template?
> Mozilla Developer Network > CSS > Specificity(伟大的文章，一定要阅读！)
> Understanding Style Precedence in CSS: Specificity,Inheritance,and the Cascade
