css - 如何更改 treeNode 背景图片

Question

我想使用不同的背景图像而不是特定 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) 的样式？

谢谢

Answer 1

这是您的选择器不够具体的情况。可以找到特异性的例子 here (包括明确的解释)。

在这种特定情况下，将 #tree 放在您的 css 选择器中的 .jdhf 前面即可解决问题

所以

#tree .jdhf {…}