css - 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>

索引.css

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

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

如果我取消选中 background-color: transparent from .ui-tree .ui-tree-node 部分，树将呈现红色(应该是)。

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

谢谢。

Answer 1

原因是，.fail 不如 .ui-tree .ui-tree-node 具体。 检查https://css-tricks.com/specifics-on-css-specificity/和 https://specificity.keegan.st/查看 css 特异性如何工作。