Css/jquery div样式

Question

我有一个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; 
      } 
     } 

任何人都确认这样做的正确方法？

Answer 1

我敢肯定你的问题是因为css风格的优先。一个id的样式（#input-whatmask）比一个类（.errorinput）更重要，所以没有什么会改变。为了纠正这种情况，将你的风格声明为#input-whatmask.errorinput而不是仅仅是.errorinput，所以它会被优先使用（id类比id更具体）。

来解释它是如何工作究竟（报价this great article）：

特异性是通过计算各个组成部分你的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是更具体的大于一类是更比元素更具体。在侧

Answer 2

样式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/

Answer 3

你想这样

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; 
    } 
} 

如果使用ATTR（）而不是addClass（），则样式将被覆盖。 attr（）将旧类名称更改为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; 
     } 
    }