如何使用 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 Validation 来验证我的表单，我基本上想在出现错误时将表单中文本框的边框颜色从黑色更改为红色。为此，我有“.invalidinput”类，我使用 .addClass 将其添加到“突出显示”部分的文本框中，并使用 .removeClass 将其删除到“取消突出显示”部分：

<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 不起作用。经过数小时的搜索和尝试，我发现问题出在我用来设置页面中所有文本框样式的嵌入样式（input[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; 
}