Question

我有<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？

Answer 1

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

其次，您需要确保在 RichFaces之后加载了自定义CSS。实现此目的的最简单方法是在!important中使用<h:outputStylesheet>。

<h:body>

这样，它将隐式地重新定位到HTML <h:head> ... </h:head> <h:body> <h:outputStylesheet name="custom.css" /> ... </h:body>的 end ，所有自动包含的JSF / RichFaces资源之后。

另见：

W3 CSS2 specification - 6.4.3 Calculating a selector's specifity

Sitepoint.com CSS reference - specifity

如何使用自定义CSS覆盖RichFaces组件的CSS

1 个答案:

另见：