1

ボーダースタイルを追加したdivがあります。ただし、CSSクラスを追加しようとすると、divスタイルが優先されます。

if ($("#input-whatmask").val() != '')
        {
            if(!searchReg.test($("#input-whatmask").val())){
                $("#input-whatmask").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }

誰かがこれを行う正しい方法/方法を確認しますか？

4

3 に答える 3

1

私はあなたの問題がcssスタイルの優先順位のためであると確信しています。id（#input-whatmask）のスタイルは、クラス（）のスタイルよりも重要であるため、.errorinput何も変更されません。これを修正するには、スタイル#input-whatmask.errorinputを単にではなくとして宣言して、.errorinput優先されるようにします（idとclassは、idよりも具体的です）。

これが正確にどのように機能するかを説明するには（この素晴らしい記事を引用して）：

特異性は、cssのさまざまなコンポーネントをカウントし、それらを形式（a、b、c、d）で表現することによって計算されます。これは例でより明確になりますが、最初にコンポーネントです。

  • 要素、疑似要素：d = 1 –（0,0,0,1）
  • クラス、疑似クラス、属性：c = 1 –（0,0,1,0）
  • Id：b = 1 –（0,1,0,0）
  • インラインスタイル：a = 1 –（1,0,0,0）

IDは、クラスよりも具体的であり、要素よりも具体的です。

于 2012-05-22T08:18:01.670 に答える
0

divタグの横にあるスタイル。例：

<div style="border: 1px solid blue;"></div>

divにアタッチされたクラスのスタイルをオーバーライドします。たとえば、このdivにはまだ青い境界線があります。

<div class="myClass" style="border: 1px solid blue;"></div>

..。

.myClass
{
    border: 1px solid red;
}

ただし、このdivには赤い境界線があります。

<div class="myClass" style="border: 1px solid blue;"></div>

..。

.myClass
{
    border: 1px solid red !important;
}

このjsフィドルを参照してください：http：//jsfiddle.net/jtVRK/

于 2012-05-22T08:20:33.600 に答える
0

このようにしますか

if ($("#input-whatmask").val() != '')
{
    if(!searchReg.test($("#input-whatmask").val())){
        $("#input-whatmask").attr("class","errorinput").after('<span class="error">Enter a valid value.</span>');
        hasError = true;
        return false;
    }
}

addClass（）の代わりにattr（）を使用すると、スタイルが上書きされます。attr（）はoldclass名をnewClass名に変更し、addClass（）はnewClassをoldClassに追加するだけです。

or


!important同じコードでnewCalssでオーバーライドする必要があるプロパティに使用します


or

if ($("#input-whatmask").val() != '')
    {
        if(!searchReg.test($("#input-whatmask").val())){
            $("#input-whatmask").removeClass("oldClass").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
            hasError = true;
            return false;
        }
    }
于 2012-05-22T09:56:02.153 に答える