0

以下に示すクラスのドロップダウンがあります。jquery を使用して、特定のクラスを動的に追加しています。しかし、.dd-widthhas!importantであるため、他のクラスを取得していません。しかし、他のクラスも追加する必要があります。これを達成する方法はありますか？

<select id="dd1" name="dd1" class=" dd-width required" >

.dd-width { width:350px !important; } 
.dd-mand {border: 3px solid #FF0004 !important;}
.dd-valid {border: 3px solid #28AF08!important;}

JS:

if (!input.val()) {
    input.addClass('dd-mand');
} else {
    input.addClass('dd-valid');
}
4

4 に答える 4

2

ここと同じ問題: ブートストラップ css によってオーバーライドされるカスタム css

「CSS 特異性計算機」の記事: http://specificity.keegan.st/

これはあなたが知りたいすべてに答えます。

于 2013-11-08T09:47:56.850 に答える
1

width他classにもキーワードを指定する必要があります!important。また、可能であれば、単純なセレクターを使用する代わりに、より具体的なセレクターを使用してclassください。

select.dd-mand {
   /* Other styles */
   width: 100px !important;
}
于 2013-11-08T09:45:14.027 に答える
1

あなたはこのように使うことができます

if (!input.val()) {
   input.removeClass('dd-valid');
   input.addClass('dd-mand');
 } else {
   input.removeClass('dd-mand');
   input.addClass('dd-valid');
}
于 2013-11-08T09:46:19.110 に答える
0

dd-mand および dd-valid クラスは、同じ css プロパティを !important で定義します。したがって、dd-mand の後に dd-valid を適用するときはいつでも、dd-mand ボーダー css ルールが最初に適用されます。

したがって、要素に最初に適用される css クラスは、重要な場合に他のクラスよりも優先されます。

したがって、最初に適用した css クラスを削除する必要があります。次に、同じ css ルールを定義する別の css クラスを適用する必要があります。

これをしたくない場合。その要素にインラインスタイルを追加することができます

$("selector").css("border", "border: 3px solid #28AF08!important");

インライン スタイルはクラスよりも優先されるためです。

ありがとう

于 2013-11-08T09:58:50.357 に答える