0

わかりましたので、次の css を使用して境界線に色を付けるフォームがあります。

input[type="text"] {
    border: 1px solid #ccc;
}

私が抱えている問題は、別の css クラスを使用して境界線の色を変更することです。次を使用すると、境界線を変更できますが、$("#div").css("border", "1px solid green");別のクラスを追加しようとしても、境界線は変更されませ$("#div").addClass("good");ん。css クラスを使用して境界線の色を変更する正しい方法は?

ありがとう、

4

5 に答える 5

1

私はあなたがこのようにスタイリングしたと思います。

input[type="text"]{
                    border: 1px solid #ccc;
                   } 
.good{
       border:1px solid red; 
     }

そして、これらのHTML。

<input type="text" id="div"/>

ここで、jquery uを使用して入力要素の境界線の色を変更するには、これらを実行する必要があります。 

$('#div').addClass('good');

ここで、入力要素の境界線の色をもう一度変更したい場合は、これらを実行してください。

$('#div').removeClass('good').addClass('green');
于 2012-07-08T19:10:39.803 に答える
1

これは css の具体性に要約する必要があります。境界線の変更を確認するのに役立ついくつかのこと:

  1. .good {} が、フォーム要素のベース css よりもスタイル シートの下位にあることを確認してください

  2. .goodそのタグ タイプの CSS クラスに子孫セレクターを追加してみてください。

    .good input[type=text]{ border: 1px solid green; }

  3. 他のすべてが失敗した場合は、クラスに追加!importantします.good

于 2012-07-08T16:31:22.940 に答える
1

スタイルが適用されるようにするには、オーバーライドを使用する必要があります。

.good { border-color: green !important; }

また

.good { border: 1px solid green !important; }

デモ

于 2012-07-08T16:32:12.143 に答える
1

次のように、スタイルをcssに保持します。

.default {
    border: 1px solid #ccc;
}

.green {
    border: 1px solid green;
}

.red {
    border: 1px solid red;
}

.blue {
    border: 1px solid blue;
}​

次に、jquery を使用して、現在のクラスを削除し、新しい目的のクラスを追加します。

$('input[type="text"]').attr('class', '').addClass(colors[i]);

このフィドルを見てみましょう: http://jsfiddle.net/joplomacedo/YnnE3/

于 2012-07-08T17:23:12.333 に答える
0

@Brian Vanderbusch は、こ​​れについて最も近い答えを持っています。これはCSS 固有の問題です。

結合されたタグ/属性セレクター (input[type="text"]) は、単一のクラス セレクター (.good) をオーバーライドしています。CSS には、どのセレクターが優先されるかを決定するために使用する一連の規則があります。

!important 修飾子を使用することは、CSS の特異性ルールをオーバーライドする 1 つの方法ですが、意図的に通常のルールを効果的に破っているので、使用には注意が必要です。これには予期しない副作用が生じる可能性があり、後で他の開発者が理解するのが難しくなる可能性があります。

この場合、クラスセレクターに適切なレベルの特異性を付与するには、それを入力セレクターと組み合わせるだけです。これにより、タグ/属性セレクターをオーバーライドするのに十分な重みが与えられます。

@Joey の回答をフォークして、標準のセレクターを使用してこれを行う方法を示し、!important を回避しました。

http://jsfiddle.net/5jX5d/

于 2012-09-18T17:54:46.390 に答える