0

我有一个包含下面显示的类的下拉列表。使用 jquery，我可以动态添加某些类。不过既然.dd-width有了!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!importantclass

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 类使用 !important 定义了相同的 css 属性。因此，当您在 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 回答