javascript - jquery 问题与 addClass() & toggleClass() & 默认 CSS 值

Question

正如你在下面的代码中看到的，背景没有改变，但是边框改变了。 问题在于默认背景值。 如何解决这个问题？!

j查询:

$(document).ready(function() {
    $('input').bind('focus blur', function() {
        $(this).toggleClass('focus');
    }); 
});

CSS:

input{background-color: blue;}
focus{background-color: red; border: 1px solid blue}

HTML:

<input>

Answer 1

在 input 上定义的 background 因其优先级而应用于标签。 focus 是一个类，而 input 是一个标签。

尝试设置:

input{
    background-color: blue;
}
.focus{
    background-color: red; !important
    border: 1px solid blue;
}