Question

我一直试图在大部分时间覆盖primeface panelgrid页脚，但我无法找到工作方式。我想改变页脚背景颜色。

我的css：

.ui-panelgrid .ui-panelgrid-footer {
    text-align: right;
    padding: 2px 5px;
    background-color: yellow;
}

我的作文页面：

<ui:composition 
template="/templates/templateMain.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:define name="navigatorWest">
    <ui:include src="pages/navigationMenu.xhtml"/>
</ui:define>
<ui:define name="bodyContent">

<h:form>    
<p:panelGrid columns="2" style="width:100%">
    <f:facet name="header"></f:facet>   
        <h:outputLabel value="" />
        <h:outputText id="currentWay" value="" />

        <h:outputLabel for="way" value="" />
        <p:selectOneMenu id="way" value="" style="width:200px">
            <f:selectItems value="" />
        </p:selectOneMenu>

        <p:outputLabel for="time" value=" />
        <p:inputText id="time" value="" size="20" validator="#">     </p:inputText>

    <f:facet name="footer"><p:commandButton value="Save" id="save"       actionListener="" ajax="false" /></f:facet>        
</p:panelGrid>  
</h:form>
</ui:define>
</ui:composition>

我的模板页面：

 <!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:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    >
 <h:head>
 </h:head>
 <h:body>
 <h:outputStylesheet library="stylesheets" name="css/styles.css" />
    <p:layout fullpage="true" >
         <p:layoutUnit position="west" resizable="true" size="245">
            <ui:include src="/pages/navigationMenu.xhtml"/>
         </p:layoutUnit>
         <p:layoutUnit id="center" position="center" resizable="true">
            <ui:insert name="bodyContent">default info</ui:insert>
         </p:layoutUnit>
    </p:layout>     
 </h:body>
 </html>

我已将样式表放在正文中，因此它将最后加载，我查找选择器检查chrome中的特定元素，但它仍然没有颜色背景并保持默认颜色。我甚至可以在检查元素的同时看到我的颜色，但它已经消失了。我不明白我做错了什么。正如你所看到的那样，背景颜色为黄色但不起作用。我应该添加对齐确实有效我可以从左向右切换按钮移动所以我想在css上有一些正确的东西。

检查要素：

Answer 1

我设法解决了自己的问题。就像Shady Aziz在开始时提出的那样，我正在查看他的链接，并尝试通过检查我想要改变的这个特定元素来复制样式中的选择器，但这样做不起作用。最后我试着看看元素本身并复制它们。我正在谈论的元素是class =＆＃34; ui-panelgrid-footer＆＃34;例如。

Css有效：

.ui-panelgrid-footer .ui-widget-header {
text-align: right;
padding: 2px 5px;
background-color: white;}

正如你所看到的那样，我采用了它下面的页脚类和类而不是样式，这构成了我想要改变的元素，并且它起作用。

希望这有助于其他人。

如何覆盖PrimeFaces panelgrid页脚css

1 个答案: