p:tree TreeNode 背景色

Question

我有以下场景：我想使用 PrimeFaces 建立一个网站。uild。以下部分呈现为白色，但应该是红色。

        <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 我看到以下结构

如果我取消选中 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/ and https://specificity.keegan.st/ 以了解 css 特异性如何工作。

Answer 2

正如我们在问题下方的评论中得出的那样，使用

.ui-tree .ui-treenode.fail

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

p:tree TreeNode 背景色

p:tree TreeNode background-color

css

primefaces

css-specificity