p：tree TreeNode background-color

Question

我有以下情况： 我想用PrimeFaces建立一个网站。以下部分呈现白色，但应为红色。

        <p:tree value="#{index.root}" var="node" style="width: 100%">
            <p:treeNode type="FAIL" styleClass="fail">
                <span style="cursor: pointer;"
                    onclick="this.parentNode.parentNode.firstChild.click();"> <h:outputText
                        value="#{node}" /> <h:commandButton value="Mark as handled" />
                </span>
            </p:treeNode>
        </p:tree>

index.css

.fail {
    background-color: red;
    color: white;
}

调查Firefox Inspector中的treeNode我看到以下结构

如果我从.ui-tree .ui-tree-node部分取消选中background-color：transparent，则树会呈现红色（应该是这样）。

有人知道为什么浏览器会出现这种行为以及如何解决它吗？

谢谢。

Answer 1

原因是，.fail的具体性低于.ui-tree .ui-tree-node。 检查https://css-tricks.com/specifics-on-css-specificity/和https://specificity.keegan.st/，了解css特异性的工作原理。

Answer 2

正如我们在问题下方的评论中所做的那样，请使用

.ui-tree .ui-treenode.fail

覆盖Primeface CSS规则。这是因为选择器以这种方式更具体。正如Tim Schoch在回答中所说的那样。