2

我有一个<rich:popupPanel>我必须设计的样式。我检查了元素，发现使用了以下 CSS。

.rf-pp-hdr-cnt {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    font-family: Arial, Verdana, sans-serif;
    font-size: 17px;
}

现在我已经对此 CSS 进行了更改，并将其包含在我的 CSS 文件中。但是，我的自定义 CSS 将被忽略，并且会读取原始 RichFaces 样式。如何使用我的自定义 CSS 并覆盖原始 CSS？

4

1 回答 1

5

首先，您需要确保选择器至少与您想要覆盖的样式的原始选择器一样强大。因此，如果您想要覆盖的原始样式由 example 指定.rf-something-else .rf-pp-hdr-cnt {}，它是一个更强大（更具体）的选择器，那么它将始终获得优先权，除非您!important为每个被覆盖的样式添加（丑陋的）属性。

其次，您需要确保您的自定义 CSS在 RichFaces之后加载。实现这一点的最简单方法是<h:outputStylesheet>在<h:body>.

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="custom.css" />
    ...
</h:body>

这样，在所有自动包含的 JSF/RichFaces 资源之后，它将隐式地重新定位到HTML的末尾。<head>

也可以看看：

于 2012-10-24T11:05:32.877 回答