Primefaces css 覆盖自定义 css

Question

.ui-orderlist .ui-orderlist-list {
    height: auto;
}

不是应该把列表的高度设置为自动吗？因为它不起作用。在浏览器样式中显示为

.ui-orderlist .ui-orderlist-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    height: 200px;
    width: 200px;
}
.ui-orderlist .ui-orderlist-list {
    height: auto; // this line no active
}

Answer 1

您可以覆盖 css 规则，方法是使它们比默认的 primefaces 规则更具体，从而为您的自定义规则提供更多 "weight"。例如，用 < div class="some_class">< p:orderList ... />< /div> 包装您的订单列表并提供 css 规则，例如：

div.some_class .ui-orderlist .ui-orderlist-list {
    height: auto;
}

您可以阅读更多关于 css 特异性 here and here。

或者，您可以向自定义规则添加 !important 例外，例如：

.ui-orderlist .ui-orderlist-list {
    height: auto !important;
}

虽然不推荐使用这种方法，但应将其用作最后的选择（如评论中提到的@Kukeltje）。

Answer 2

几天前我遇到了同样的问题。您必须确保您的样式表在默认 PrimeFaces CSS 之后加载。您可以通过以下方式包含样式表来实现此目的：

<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
    </f:facet>
</h:head>

PS：请不要使用!important。

Primefaces css 覆盖自定义 css

Primefaces css overrides custom css

css

jsf

primefaces