Question

我有下面显示的类的下拉列表。使用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');
}

Answer 1

与此处相同的问题： custom css being overridden by bootstrap css

“CSS特异性计算器”文章：http://specificity.keegan.st/

这回答了你想知道的一切。

Answer 2

您需要在其他width以及class关键字中指定!important，如果可以，还可以使用更具体的选择器，而不是使用简单的{{1}选择器。

class

Answer 3

你可以像这样使用

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

Answer 4

你的dd-mand和dd-valid类用！important定义了相同的css属性。因此，当你在dd-mand之后应用dd-valid时，将首先应用dd-mand border css规则。

所以首先应用于元素的css类在重要的情况下将优先于其他类。

所以你必须删除你先申请的css类，然后你必须应用另一个定义相同css规则的css类。

如果您不想这样做。您可以通过

为该元素添加内联样式

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

因为内联样式的优先级高于类。

谢谢你

如何写旁路css！重要标签

4 个答案: