java primefaces 组件不能使用自己的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10936982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
primefaces components not working with own css
提问by z22
i am using ready-made template(with css and j-queries) in my java ee app. all the primefaces components are rendered properly except the panelgrid control of primefaces 3.2. it is displayed with border. i want it without border. i have removed all the table styling from the css of custom ready-made template. still the border is there. when i remove the readymade template, the panelgrid is rendered perfectly without any border. how do i remove the border and what is the cause of this problem?
我在我的 java ee 应用程序中使用现成的模板（带有 css 和 j 查询）。除了primefaces 3.2的panelgrid控件外，所有primefaces组件都正确呈现。它显示有边框。我想要它没有边界。我已经从自定义现成模板的 css 中删除了所有表格样式。边界仍然存在。当我删除现成的模板时，panelgrid 完美呈现，没有任何边框。我如何删除边框，这个问题的原因是什么？
edited:xhtml file:
编辑：xhtml 文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP administration panel - A massive administration panel</title>
</h:head>
<h:body>
<div>
<h:form>
<p:panelGrid columns="2" style="border: none">
<h:outputText value="scrip symbol"/>
<p:inputText value=""/>
<p:commandButton value="submit"/>
</p:panelGrid>
</h:form>
</div>
</h:body>
</html>
回答by BalusC
When overriding PrimeFaces default styles, you have to specify a CSS selector of at leastthe same strength or to specify a strongerselector. The strength of a CSS selector (the cascading rules) is specified in the W3 CSS specificationand clearly explained in this article: Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade.
当覆盖 PrimeFaces 默认样式时，您必须指定一个至少具有相同强度的 CSS 选择器或指定一个更强的选择器。CSS 选择器的强度（级联规则）在W3 CSS 规范中进行了详细说明，并在这篇文章中进行了清楚的解释：了解 CSS 中的样式优先级：特异性、继承和级联。
Based on PrimeFaces own CSS, the following selectors should do:
基于 PrimeFaces 自己的 CSS，以下选择器应该做：
.ui-panelgrid tr, .ui-panelgrid td {
border: none;
}
Just put them in a .cssfile which you include by <h:outputStylesheet>inside the beginning of the <h:body>so that it will be included afterPrimeFaces own style.
只需将它们放在一个.css包含<h:outputStylesheet>在开头的文件中，<h:body>这样它就会包含在PrimeFaces 自己的样式之后。
<h:body>
<h:outputStylesheet name="layout.css" />
...
</h:body>
See also:
也可以看看：
- How to remove border from specific PrimeFaces p:panelGrid?
- How do I override default PrimeFaces CSS with custom styles?
Update: As per your update, your CSS doesn't seem to be loaded at all. You should have noticed this by verifying the HTTP traffic in browser builtin webdeveloper toolset (press F12 in Chrome/IE9/Firebug) and seeing that it returned a HTTP 404 error. When using <h:outputStylesheet>you need to put the CSS file in the /resourcesfolder of the webcontent. So you must have a /resources/css/mycss.cssin order to be able to use <h:outputStylesheet name="css/mycss.css" />.
更新：根据您的更新，您的 CSS 似乎根本没有加载。您应该已经通过在浏览器内置 webdeveloper 工具集中验证 HTTP 流量（在 Chrome/IE9/Firebug 中按 F12）并看到它返回 HTTP 404 错误来注意到这一点。使用<h:outputStylesheet>时需要将CSS文件放在/resourceswebcontent文件夹下。所以你必须有一个/resources/css/mycss.css才能使用<h:outputStylesheet name="css/mycss.css" />.
