0

Spring、JSP、PrimeFaces 6.2、およびブートストラップ 3.37 を使用して、Eclipse プロジェクトに取り組んでいます。

2 つのボックスがあり、そのうちの 1 つは CSS が正しく適用されており、もう 1 つは適用されていません。

override.css にいくつかの特定の CSS スタイルがあります。私が使用しているカスタム クラス タグをターゲットにして、背景色を変更します。

.mytag
{
    background-color: rgb(255,204,204);
}

マイページの構成はこんな感じ

  • head - サブフォルダーのヘッダー ページを読み込みます
  • body - フォームページをロード
  • フッター
<h:head>
    <title>#{text['form.title']}</title>
    <h:outputStylesheet library="css" name="form.css"/>
    <h:outputScript library="js" name="form.js"/>
    <h:outputStylesheet library="css" name="override.css" />    
</h:head>

ファイルに適用される唯一の CSS は「mytag」ですが、下に表示されているように、さらに多くの CSS が自動挿入されています。

ヘッダー css タグ

ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all mytag

ヘッダーCSSタグではありません

ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all mytag

IE 用の F12 開発者ツール (IE 固有のサイト/アプリケーション) を使用して、スタイルを最高から最低まで見てみると、機能しないものが表示されます。

  • フォーム.cssspan.if .ui-inputfield, div.if .ui-inputfield
  • コンポーネント.css.ui-widget-header .ui-inputfield, .ui-widget-content .ui-inputfield
  • テーマ.css.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield
  • (背景) theme.css.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
  • テーマ.css.ui-widget .ui-widget
  • フォーム.css.ui-widget, .ui-widget .ui-widget
  • (背景) theme.css.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield
  • テーマ.css.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
  • テーマ.css.ui-widget .ui-widget
  • テーマ.css.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
  • テーマ.css.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
  • コンポーネント.css.ui-inputfield
  • オーバーライド.css.mytag

動作するスタイルのリストは次のとおりです

  • フォーム.cssspan.if .ui-inputfield, div.if .ui-inputfield
  • コンポーネント.css.ui-inputfield
  • オーバーライド.css.mytag

したがって、両方のボックスに CSS を適用する同じコード セクションがあるため、順序は同じにする必要があります。それでも、ヘッダーでの順序に関係なく、「form.css」と「components.css」は一貫してオーバーライドよりも優先度が高いことがわかりました。「theme.css」が自動的に適用されているため、ボックスが機能していないのはさらに悪いことです。

注: 当初は、bootstrap.theme.css だと思っていましたが、別の質問/回答から、実際には primefaces テーマであると確信しました。<h:outputStylesheet library="primefaces-aristo" name="theme.css" />

私が試した解決策

  • ヘッド内の CSS 要素の並べ替え
  • この回答からページの読み込み後にoverride.cssを追加しました（override.cssはまったくなかったので、間違っていたに違いありません）
  • オーバーライドの前にprimefacesテーマを含める
  • <f:facet name="first|middle|last">この回答から
4

1 に答える 1

0

BalusCとKuleltjeのコメントに記載されているように、私の問題は特異性によるものだったので、誰かが興味を持っている場合. 彼らが指摘した質問は問題を解決しました。

JSF または primefaces から自動的に追加されたクラス タグが原因で、override.css ファイルを変更して一致させる必要がありました。

.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.mytag
{
    background-color: rgb(255,204,204);
}
于 2019-12-10T14:11:23.230 に答える