Primefaces css覆盖自定义css

Question

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

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

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

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

你可以在这里和这里阅读更多关于css专用性的内容。

或者，您可以在自定义规则中添加!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