Question

我想使用菜单栏更改子菜单的标签颜色。我正在使用的代码如下：

    <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <h:form>

                <h:panelGrid columns="1" style="font: 12px sans-serif;width:800px;height: 19px">
                    <p:menubar autoDisplay="false" style="padding: 0px">  
                        <p:menuitem value="Tableau de bord" action="#{liens.lienTableauDeBord()}" ajax="false" icon="ui-icon-home" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/>
                        <p:menuitem value="|" disabled="true" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/>
                        <p:submenu label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"> 
                            <p:menuitem value="Création" action="#{liens.lienCreerAffaire()}" ajax="false" icon="ui-icon-document"/>  
                            <p:menuitem value="Consultation" action="#{liens.lienConsultationAffaire()}" ajax="false" icon="ui-icon-search"/>  
                        </p:submenu>  
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:submenu label="Outillages" style="margin-top: -4px;height: 19px"> 
                            <p:menuitem value="Création" action="#{liens.lienNumOutil()}" ajax="false" icon="ui-icon-document" style="padding: 0px"/>  
                            <p:menuitem value="Consultation" url="#" icon="ui-icon-search" style="padding: 0px"/>  
                        </p:submenu> 
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:menuitem value="Recherche et consultation DT" url="#" icon="ui-icon-search" style="padding: 0px"/>  
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:menuitem value="Paramètres" url="#" icon="ui-icon-wrench"  style="padding: 0px"/>
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:menuitem value="Déconnexion" url="#" icon="ui-icon-closethick" style="padding: 0px" /> 
                    </p:menubar>  
                </h:panelGrid>

    </h:form>



</ui:composition>

我正在使用PrimeFaces的主题，每个菜单上都有白色字体，CSS样式表将每个文本的颜色设置为白色，但标签 Affaires 和 Outillages 赢了变为白色。我也尝试用属性来改变它。它适用于 menuitems ，但不适用于子菜单。

文本颜色必须是白色，背景为深蓝色（如CSS样式表中所定义），但我不必不惜一切代价使用PrimeFaces。

我正在使用Netbeans 7.2和PrimeFaces 3.4.2

如果有人可以帮助我，我会用饼干奖励他

谢谢！

Answer 1

问题背后的原因是

.ui-widget-content a

用primefaces编写的css规则覆盖了你的内联样式

详细了解css规则优先级here，参考SO问题here

在子菜单中添加样式类属性。

e.g：

<p:submenu styleClass="affaires" label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"> 
   <p:menuitem value="Création" ajax="false" icon="ui-icon-document"/>  
   <p:menuitem value="Consultation" ajax="false" icon="ui-icon-search"/>  
</p:submenu>

将css添加到您的页面

<style>
    .affaires .ui-menuitem-text{color:white;}
</style>

您也可以使用以下css设置子菜单（弹出窗口）背景，

.affaires .ui-menu-child{background: blue;}

另外我建议你使用firebug（firefox插件）来检查css，这在大多数情况下解决了这个问题。

希望这有帮助。

如何更改菜单栏中子菜单的标签颜色？

1 个答案: