2

入力要素があります：

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

そして次のCSSクラス：

.box-change
{
    border-color:#ffffff;
}

また、次のjQueryコードもあります。

$('#box').toggleClass('box-change');

ただし、期待どおりに境界線の色は変更されません。誰かが理由を知っていますか？

編集：

入力にはすでにスタイルがあり、次のようになります。

#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}
4

2 に答える 2

3

最初に境界線を削除した場合は、設定する必要があります

border-width

と

border-style

つまり、CSSは次のようになります。

.box-change
{
    border: 1px solid #fff;
}

しかし、それはすべてあなたの最初のスタイルが何であるか、あなたの入力の含まれている要素の背景が何色であるかなどに依存します...

詳細を入力してから編集してください

IDでスタイルを設定するクラスは、CSSクラスよりもカスケードの優先度が高いため、クラスは適用されません。それが適用されていない主な理由です。

CSSクラスに引き継がせたい場合は、次の2つのオプションがあります。

  1. 重要なものとして設定します。

    .box-change
{
    border: 1px solid #fff !important;
}

  2. より高い特異性を持ち、引き継ぐCSSルールを提供する

    #box.box-change
{
    border: 1px solid #fff;
}

2番目の方法が推奨される方法です。これを使用!importantするとCSSの保守が難しくなります。これは、クラスがCSSに従ってではなく、重要度に従ってカスケードされるためです。そして、あなたはそれを簡単に制御できなくなります。めったにない場合を除いて、重要なことは避けてください。

これをトラブルシューティングする方法は？

将来的に役立つように、ブラウザで開発者ツール（ChromeDevToolsまたはFirefoxの場合はFirebug）を使用すると、すぐに問題が発生します。そしてもちろん、CSSの特異性ルールとそれらがどのようにカスケードするかを理解してください。

于 2012-09-03T23:17:04.010 に答える
2

元のスタイルはで定義されているため、#boxより具体的で.box-changeあり、デフォルトでは新しい追加が上書きされます。.box-changeカスケードの上位にある可能性もあります#box。

次の2つの方法のいずれかで解決できます。

#box.box-change{
  border-color: #fff;
}

また

.box-change{
  border-color: #fff !important;
}
于 2012-09-03T23:38:09.790 に答える