如何更改treeNode背景图像答案

【问题标题】：How to change treeNode background image如何更改treeNode背景图像
【发布时间】：2015-03-09 21:31:19
【问题描述】：

我想使用不同的背景图像，而不是特定 treeNode 的默认图像。

<h:panelGroup id="tree-panel">
        <p:tree 
            id ="tree"
            value="#{processBean.root}" 
            var="sp" 
            dynamic="false" 
            cache="true" 
            animate="true"
            selectionMode="single"
            selection="#{processBean.selectedNode}"
            rendered="#{processBean.renderTree}"> 
            <p:treeNode type="csp" collapsedIcon="ui-icon-folder-collapsed"
                        expandedIcon="ui-icon-folder-open"
                        styleClass="jdhf">  
                <h:outputText value="#{sp}" />  
            </p:treeNode>
            <p:treeNode type="ncsp" icon="ui-icon-document" >  
                <h:outputText value="#{sp}" />  
            </p:treeNode>
        </p:tree> 
    </h:panelGroup>


.jdhf {
background-image: url("#{resource['primefaces-redmond/images/ui-icons_cd0a0a_256x240.png']}");
}

如何更改第一个节点 (csp) 的样式？

谢谢

【问题讨论】：

使用 css.. 只需确保您的选择器比默认选择器更具体
能否请您添加一些示例。

标签： css jsf-2 primefaces

【解决方案1】：

这是您的选择器不够具体的情况。可以在here 找到一个具体示例（包括清晰的解释）。

在这种特定情况下，将 #tree 放在 CSS 选择器中的 .jdhf 前面将解决它

所以

#tree .jdhf {…}

【讨论】：

【解决方案2】：

这样就可以了：

 <p:treeNode type="ncsp" icon="ui-icon-document" styleClass="custom">  
                <h:outputText value="#{sp}" />  
            </p:treeNode>


.custom .ui-treenode-content .ui-icon {
    background-image: url("#{resource['primefaces-redmond/images/ui-icons_cd0a0a_256x240.png']}");
}

【讨论】：