如何使用JQuery addClass覆蓋嵌入式樣式？

Question

我有一個內嵌式的在我的頁面設置所有文本框的樣式的形式：

<style type="text/css"> 
input[type=text], [type=password] { 
    border: 1px solid black; 
    font-family: Verdana, Arial, Georgia, 'Trebuchet MS', 'Times New Roman'; 
    font-size: 12px; 
    height: 15px; 
    margin: 0px; 
    padding: 3px; 
} 

.invalidinput { 
    border: 1px solid red; 
} 
</style> 

我還使用jQuery驗證來驗證我的形式和我基本上要更改的邊框顏色當出現錯誤時，文本框的形式從黑到紅。要做到這一點，我有類「.invalidinput」，我使用.addClass將其添加到「高亮」部分中的文本框，並將.removeClass刪除爲「unhighlight」中的一個：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#frmLogin").validate({ 
     rules: { 
      txtUsername: "required", 
      txtPassword: "required" 
     }, 
     messages: { 
      txtUsername: "Enter your username", 
      txtPassword: "Enter your password" 
     }, 
     highlight: function (element, errorClass, validClass) { 
      $(element).addClass("invalidinput"); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
      $(element).removeClass("invalidinput"); 
     }, 
     errorPlacement: function (error, element){ 
      if (element.attr("id") == "txtUsername") { 
       $(error).appendTo($("label[for='txtUsername']")); 
      } 
      else if (element.attr("id") == "txtPassword") { 
       $(error).appendTo($("label[for='txtPassword']")); 
      } 
      else { 
       error.insertAfter(element); 
      } 
     } 
    }); 
}); 
</script> 

問題是.addClass和.removeClass不起作用。經過幾個小時的搜索和嘗試，我發現問題在於我使用的嵌入式樣式來設置頁面中所有文本框的樣式（輸入[type = text]，[type = password] {}）。如果我刪除它，或者我將它更改爲命名類（如.validinput {}），那麼它工作得很好。而不是

"$(element).css("border", "1px solid red");" 

的這個：我已經能夠得到工作的唯一的解決方法就是採用這種

$(element).addClass("invalidinput"); 

我的問題是，我該如何讓.addClass與我的嵌入式的工作作風？

謝謝。

Answer 1

這不起作用的原因是因爲特異性。 input[type=text]選擇器比invalidinput選擇器更具體。

這應該工作：

[type=text], [type=password] { 
    border: 1px solid black; 
    /* other styles... */ 
} 

.invalidinput { 
    border: 1px solid black; 
} 

或只是input選擇添加到他們都：

input[type=text], input[type=password] { 
    border: 1px solid black; 
    /* other styles... */ 
} 

input.invalidinput { 
    border: 1px solid black; 
}