0

私はicefaces 3.2を使用しています。入力ボックスに css の問題があります。次のようなテキストエントリがあります

                <ace:textEntry id="custName" value="#{strformbean.customer1.custName}"   size="20" maxlength="50"  label="Customer Name"
                     required="true"  styleClass="requiredField" />

  <style type="text/css" >
    .requiredField{
        background: rgb(255,239,214) ;
        border-color:Gray   ;
    }
</style>

styleClass="requiredField" は、テキストエントリの背景色を変更することになっていますが、適用されていません。IE CSS デバッガーを使用すると、実際の html ソースが次のようになっていることに気付きました

<input name="form:custName_input" class="ui-inputfield ui-textentry ui-widget ui-state-default ui-corner-all ui-state-required requiredField" id="form:custName_input" role="textbox" aria-required="true" type="text" size="20" maxLength="50" jQuery17104644470378519651="44"/>

私のCSSルールの前に、この入力ボックスに適用されるCSSルールがたくさんあります。そして、私のルールの背景スタイルは、背景を適用している他のルールがあることを意味します。

4

1 に答える 1

1

まず、可能であれば、より優れた開発者ツールを備えたブラウザーを使用することをお勧めします。Chrome、Safari、Opera、Firefox には優れたツールがあり、スタイルがどこから来て、何がオーバーライドされているかをより詳細に知ることができます。また、その場で新しいスタイルを切り替え、修正、追加することもできます。

あなたの場合、入力フィールドに適用される他のクラスの数を考えると、クラス.requiredFieldがより特異性の高いセレクターによってオーバーライドされている可能性が高くなります。たとえば、次のルールです。

.requiredField {
    color: rgb(255,239,214); 
}

これによって上書きされます：

.container .requiredField {
    color: black; 
}

このトピックについて詳しく説明している Chris Coyier による素晴らしい記事があります: http://css-tricks.com/specifics-on-css-specificity/

セレクターがオーバーライドされている可能性があるため、次の 2 つのオプションがあります。

  1. セレクターに他のセレクターよりも高い特異性を与えます (上記のように)。たとえば、次のようになります。
    .container .requiredField { ... }

  2. !important要素に適用される他のすべてのスタイルをオーバーライドするために使用します
    color: red !important;。注:スタイルの目的 (検証) に適しているため、これをお勧めします。これは、複数のオーバーライドで長期的なメンテナンスの問題が発生する可能性があるため、慎重に使用する必要があります。

どちらの場合も、最適なソリューションを使用できるように、適用されている他のスタイルを正確に確認することが重要です。たとえば、ID とクラスを任意にセレクターに追加して他のスタイルをオーバーライドすることは、同じ問題につながるため、お勧めできません。を使用してドキュメント内にスタイルを配置しないこともお勧めし<style>ます。これは完全に有効ですが、CSS を追跡するのが難しくなり、一般的に悪い習慣と見なされます。<link>タグを使用して外部スタイルシートにリンクすることをお勧めします。

于 2013-01-22T16:24:38.367 に答える