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

まず、セレクターが、オーバーライドしたいスタイルの元のセレクターと少なくとも同じくらい強力であることを確認する必要があります。したがって、オーバーライドしたい元のスタイルがたとえば.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 に答える