javascript - 如何在使用 input[type=text] 时使用 jquery 更改表单背景颜色；

Question

我知道我的标题有点困惑，也许有人可以建议一个不同的。

所以无论如何，我正在学习一些 Jquery，我想用它来进行表单验证，我会展示代码然后问问题。

表格:

<form action="" method="POST">
    <ul>
        <li>
            <label for="market_1">Market: </label>
            <input type="text" name="market_1" id="market_1" />
        </li>
   </ul>
</form>

JS:

$(document).ready(function()
{
    $("#market_1").addClass("text_box_error");
});

CSS:

input[type="text"]
{
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #5B5B5B;
    width: 148px;
}

input[type="text"]:hover, input[type="text"]:focus 
{
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #5B5B5B;
    font-weight: bold;
}
.text_box_error 
{
    background-color: red;
}

目前，我只是想让它在我点击提交按钮时改变颜色。现在我可以让它工作了，但是当我使用 input[type="text"] 设置输入框的样式时我无法让它工作。

我想通过这样做我可以将所有输入框设置为相同的样式，然后使用 jquery addClass 方法我可以覆盖背景颜色。

那么，为什么这不适用于我向您展示的设置？

编辑:抱歉，我更新了代码并在此处粘贴了错误的版本，我没有更新代码。

Answer 1

这与 selector specifity 有关.

选择器 input[type="text"] 包含一个元素名称并引用一个属性，因此它具有 0,0,1,1 的规范.

然而，选择器 .text_box_error 只包含一个(类)属性，因此它具有 0,0,1,0 的特性——因此它的 background-color 被另一个具有更高特异性的选择器覆盖。

只需使用 input[type="text"].text_box_error 作为选择器——它将具有 0,0,2,1 的特性，因此“赢得”第一个选择器。